十分鐘搞定CSS選擇器

在最近的web開發中是否是就會用到一些選擇器，發現不少尤爲是CSS3新增的不太熟悉，在此總結一下。

優先級

不一樣級別

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元素以後插入生成的內容