十分鐘搞定CSS選取器

標籤：code   top   class   too   cells   checkbox   選中   let   優先   

在最近的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元素之後插入產生的內容

十分鐘搞定CSS選取器