CSS選擇器

  

 CSS選擇器：基礎、關係、屬性、僞類、僞對象等；

 

選擇器優先級的計算：style=1000(內聯樣式表)

                                   ID=100

                                   class=10

                                   element=1

 

1. 基礎選擇器  ID>class>element>*

 

2. 關係選擇器

        1.包含（後代）選擇器 E F    E爲F的外層元素

        2.子選擇器 E>F   　　  　E爲F的父級

        3.相鄰選擇器 E+F  　 　  選擇與自身相鄰，且緊跟在自身後面的兄弟元素

        4.兄弟選擇器 E~F      　  全部的符合條件的位於自身後面的兄弟元素

        5. 並集選擇器 E，F         二者不須要有什麼關係，只是同用一個樣式

        6. 交集選擇器 E.F ,E#F   具備F類名或id名的E元素

 

3.屬性選擇器     E與[ ]中不要有空格

    經過屬性來選擇，定義的時候用[] 來定義:

    【注意事項：1.必須是屬性； 2. 屬性選擇器耗費資源比基本選擇器大；】

    E[att]  經過屬性名來選擇

    E[att="val"]   屬性名和屬性值都符合纔會被選中；

    E[att~="val"]  其中一個class符合即被選中；

    E[att^="val"]  以val開頭的att屬性被選中；

    E[att$="val"]  以val結尾的att屬性被選中；

    E[att*="val"]  包含了val內容的屬性值的元素會被選中；

    E[att|="val"]  以val開頭，而且後面緊跟中劃線的元素被選中；

    [class]{ color：red ;  }  ----->全部具備類名的元素都爲紅色；

 

4. 僞類         E與：中不要有空格

    經過冒號：定義僞類

    ：root   選擇匹配文檔的根元素（每一個文檔只有一個根元素）

    E:link   超連接未被點擊時的狀態（顏色、背景）               

    E:visited   超連接被訪問後的狀態

    E:hover  鼠標懸停時的狀態，不限a標籤，其它元素也能夠

    E:active  鼠標按下時的狀態

　　【測試超連接的幾個狀態時，能夠用快捷鍵Ctrl+H：清除緩存】 

    E:not(s)  除去括號裏面的選擇器的元素，其它的元素會被選中。括號裏面能夠是class選擇器也能夠是id選擇器，要經過.或#來選擇，而且        不要加引號

    E:first-child E須要具備父級，而且E是父級的第一個元素  E表明了要操做元素自己，並不是父元素

    E:last-child   同上

    E:only-child 具備父元素，而且E是父元素中惟一的

    E:empty 匹配徹底沒有內容的E元素，空格和換行都算作內容。

    E:checked  能夠匹配被選中的元素，

            如radio 和select 中的option

            <input type="radio" name="gender" checked="checked" />

            <option value="0" selected="selected" >汽車</option>

       -------cheked實例

            html結構

            <form action="">

                    <input type="radio" name="gender" /><span>男</span>

                    <input type="radio" name="gender"/><span>女</span>

                    <select name="" id="">

                            <option value="0">汽車</option>

                            <option value="1" selected="selected">火車</option>

                            <option value="2">自行車</option>

                    </select>

            </form>

            css樣式

                        input:checked + span{color: red;}

                        option:checked{ color: aqua;}

 

5.僞對象選擇器（不存在於HTML中，不會改變文檔的結構）   E與::中不要有空格

    用::來定義僞元素（僞對象）

    E::before{ content:" "; }

    E::after{ content:" "; }

          例：1.  16° -----> ::after 結合position:absolute;

                2.   利用僞元素給文檔添加圖片 （display：block；設置大小；）

　　　　　  3.利用僞元素清除浮動：.clearfloat:after {content: ""; display: block; height:0; clear:both; visibility: hidden;}

　　　　　　 4.利用僞元素繪製簡單的圖形，例如小三角等;

　　　　　　　　僞元素的用處還有不少，再也不一一列舉；

【注意事項：

    E 只能有一個after和一個before，如有多個按最後一個顯示；

　　僞元素不存在於文檔流，不能被選中;】

 

 

<------學習筆記，若有錯誤，謝謝指正！------->