css選擇器總結

簡簡和單單發表於2016-06-16
CSS

（一）選擇器優先順序：

不同級別

1. 在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。

2.作為style屬性寫在元素內的樣式

3.id選擇器

4.類選擇器

5.標籤選擇器

6.萬用字元選擇器

7.瀏覽器自定義

　　同一級別

同一級別中後寫的會覆蓋先寫的樣式

　（二）基礎選擇器

選擇器 含義
* 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
#id id選擇器，匹配特定id的元素
.class 類選擇器，匹配class包含(不是等於)特定類的元素
element 標籤選擇器

 

複製程式碼
　　*
        {
            /*頁面所有元素都使用*/
            border:0;
        }

        #test
        {
            /*id=test 的元素*/
            background-color:#0e0;
        }

        .staus
        {
            /*含有類status的元素*/
            border:0;
        }

        div
        {
            /*頁面所有div*/
             background-color:#0e0;
        }
複製程式碼

（三）組合選擇器

選擇器 含義
E,F 多元素選擇器，用”,分隔，同時匹配元素E或元素F
E F 後代選擇器，用空格分隔，匹配E元素所有的後代（不只是子元素、子元素向下遞迴）元素F
E>F 子元素選擇器，用”>”分隔，匹配E元素的所有直接子元素
E+F 直接相鄰選擇器，匹配E元素之後的相鄰的同級元素F
E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之後的同級元素F（無論直接相鄰與否）
.class1.class2 這個姑且也算一個吧，沒什麼名字，匹配類名中既包含class1又包含class2的元素

　　我就不一一舉例子了，選擇器並不是只能寫兩層，發現有些小朋友有這種誤解，認為只能寫E>F這樣的，我們寫可以寫E>F.class Element這樣，你要你搞得定優先順序

 

（四）屬性選擇器

 

選擇器 含義
E[attr] 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
E[attr=value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
E[attr~=value] 匹配所有屬性attr具有多個空格分隔、其中一個值等於value的元素
E[attr|=value] 匹配所有att屬性具有多個”-”分隔、其中一個值以value開頭的元素，主要用於lang屬性，比如“en”、“en-us”
E[attr ^=value] 匹配屬性attr的值以value開頭的元素
E[attr $=value] 匹配屬性attr的值以value結尾的元素
E[attr *=value] 匹配屬性attr的值包含value的元素

（五）偽類選擇器 

選擇器 含義
E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點選的連結
E:visited 匹配所有已被點選的連結
E:active 匹配滑鼠已經其上按下、還沒有釋放的E元素
E:hover 匹配滑鼠懸停其上的E元素
E:focus 匹配獲得當前焦點的E元素
E:lang(c) 匹配lang屬性等於c的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配使用者當前選中的元素
E:root 匹配文件的根元素，對於HTML文件，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n) 匹配其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標籤的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標籤的元素
E:last-child 匹配父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標籤的唯一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一個不包含任何子元素的元素，文字節點也被看作子元素
E:not(selector) 匹配不符合當前選擇器的任何元素

（六）偽元素選擇器

 

選擇器 含義
E:first-line 匹配E元素內容的第一行
E:first-letter 匹配E元素內容的第一個字母
E:before 在E元素之前插入生成的內容
E:after 在E元素之後插入生成的內容

原文地址：http://www.cnblogs.com/huyong/articles/3358473.html

相關文章