CSS選取器整理

很多人都覺得 CSS特別簡單，但其實真正寫好 CSS並不容易， CSS的每一點其實內容都很多，就拿選取器來說， CSS選取器大概可以分為五類：

• 元素選取器

• 關係選取器

• 屬性選取器

• 偽類別選取器

• 偽對象選取器

元素選取器

選取器	名稱	描述
*	通配選取器	選擇所有的元素
E	元素選取器	選擇指定的元素
#idName	id選取器	選擇id屬性等於idName的元素
.className	class選取器	選擇class屬性包含className的元素

元素選取器只要是寫CSS都會經常用，這一塊的內容非常簡單，沒什麼特別要說的。

關係選取器

選取器	名稱	描述
E F	包含選取器	選擇所有包含在E元素裡面的F元素
E>F	子選取器	選擇所有作為E元素的子項目F
E+F	相鄰選取器	選擇緊貼在E元素之後的F元素
E~F	兄弟選取器	選擇E元素所有兄弟元素F

這裡要注意幾點：

• 子選取器只能選中字元素，而不能選中孫輩；而包含選擇符將會選中所有合格後代，包括兒子，孫子，孫子的孫子...

• 相鄰選擇符只會選中合格相鄰的兄弟元素；而兄弟選擇符會選中所有合格兄弟元素，不強制是緊鄰的元素。

• 在Android Browser4.2.*及以下，偽類別選取器:checked與兄弟選擇符一起使用會有一個bug，查看詳情。

屬性選取器

選取器	描述
E[att]	選擇具有att屬性的E元素
E[att="val"]	選擇具有att屬性且屬性值等於val的E元素
E[att~="val"]	選擇具有att屬性且屬性值其中一個等於val的E元素（包含只有一個值且該值等於val的情況）
E[att|="val"]	選擇具有att屬性且屬性值為以val開頭並用串連符-分隔的字串的E元素，如果屬性值僅為val，也將被選擇
E[att^="val"]	選擇具有att屬性且屬性值為以val開頭的字串的E元素
E[att$="val"]	選擇具有att屬性且屬性值為以val結尾的字串的E元素
E[att*="val"]	選擇具有att屬性且屬性值為包含val的字串的E元素

偽類別選取器

選取器	描述
E:link	設定超連結a在未被訪問前的樣式
E:visited	設定超連結a在其連結地址已被訪問過時的樣式
E:hover	設定元素滑鼠在其懸停時的樣式
E:active	設定元素在被使用者啟用（在滑鼠點擊與釋放之間發生的事件）時的樣式
E:focus	設定元素在成為輸入焦點（該元素的onfocus事件發生）時的樣式。(一般應用於表單元素)
E:checked	匹配使用者介面上處於選中狀態的元素E。(用於input type為radio與checkbox時)
E:enabled	匹配使用者介面上處於可用狀態的元素E。(一般應用於表單元素)
E:disabled	匹配使用者介面上處于禁用狀態的元素E。(一般應用於表單元素)
E:empty	匹配沒有任何子項目（包括text節點）的元素E
E:root	匹配E元素在文檔的根項目。在HTML中，根項目永遠是HTML
E:not(s)	匹配不含有s選擇符的元素E
E:first-child	匹配父元素的第一個子項目E
E:last-child	匹配父元素的最後一個子項目E
E:only-child	匹配父元素僅有的一個子項目E
E:nth-child(n)	匹配父元素的第n個子項目E
E:nth-last-child(n)	匹配父元素的倒數第n個子項目E
E:first-of-type	匹配同類型中的第一個同級兄弟元素E
E:last-of-type	匹配同類型中的最後一個同級兄弟元素E
E:only-of-type	匹配同類型中的唯一的一個同級兄弟元素E
E:nth-of-type(n)	匹配同類型中的第n個同級兄弟元素E
E:nth-last-of-type(n)	匹配同類型中的倒數第n個同級兄弟元素E

注意事項：

• 超連結的4種狀態(訪問前，滑鼠移至上方，當前被點擊，已訪問)，需要有特定的書寫順序才會生效；a:hover 必須位於 a:link 和 a:visited 之後，a:active 必須位於 a:hover 之後。

• E:first-child選擇符，E必須是它的兄弟元素中的第一個元素，換言之，E必須是父元素的第一個子項目。與之類似的偽類還有E:last-child，只不過情況正好相反，需要它是最後一個子項目。

關於:not()的用法

假定有個列表，每個清單項目都有一條底邊線，但是最後一項不需要底邊線。

 li:not(:last-child) {    border-bottom: 1px solid #ddd;}

上述代碼的意思是：給該列表中除最後一項外的所有清單項目加一條底邊線。是不是很方便。

關於:nth-child()的用法

要使E:nth-child(n)生效，E元素必須是某個元素的子項目，E的父元素最高是body，即E可以是body的子項目。:first-child、:last-child、:only-child、:nth-last-child(n)也是一樣。
nth-child(n)括弧裡的n可以是一個數字，一個關鍵字，或者一個公式。

:nth-child(length) /*參數是具體數字 length為整數*/:nth-child(n) /*參數是n,n從0開始計算*/:nth-child(n*length) /*n的倍數選擇，n從0開始算*/:nth-child(n+length) /*選擇大於等於length後面的元素*/:nth-child(-n+length) /*選擇小於等於length前面的元素*/:nth-child(n*length+1) /*表示隔幾選一*/:nth-child(2n) / :nth-child(even) /*表示偶數*/:nth-child(2n+1) / :nth-child(odd) /*表示奇數*/

關於:...-child和:...-of-type的差異

這兩個系列的屬性確實很相似，對於不熟悉的人可能很難區分。

E:first-of-type 總是能命中父元素的第1個為E的子項目，不論父元素第1個子項目是否為E；而E:first-child裡的E元素必須是它的兄弟元素中的第一個元素，否則匹配失效。E:last-of-type 與E:last-child也是同理。
E:nth-of-type(n)總是能命中父元素的第n個為E的子項目，不論父元素第n個子項目是否為E；而E:nth-child(n)會選擇父元素的第n個子項目E，如果第n個子項目不是E，則是無效選擇符，但n會遞增。
關於:nth-child()與:nth-of-type()的區別可以看這篇文章

用:empty區分空元素

選擇不包含子項目的p元素：

p:empty

選擇包含子項目的p元素：

p:not(:empty)

偽對象選取器

選取器	描述
E:before/E::before	在目標元素E的前面插入的內容。用來和content屬性一起使用
E:after/E::after	在目標元素E的後面插入的內容。用來和content屬性一起使用
E:first-letter/E::first-letter	設定元素內的第一個字元的樣式
E:first-line/E::first-line	設定元素內的第一行的樣式
E::placeholder	設定元素文字預留位置的樣式。(一般用於input輸入框)
E::selection	設定元素被選擇時的字型顏色和背景顏色

注意事項：

• ::placeholder在使用時需要加上各個瀏覽器的首碼；除了Firefox是 ::[prefix]placeholder，其他瀏覽器都是使用 ::[prefix]input-placeholder。

總結

選取器用得好其實可以讓我們少些很多代碼。其實還有一些東西沒有展開來講，比如:before和:after，後面專門寫一篇文章來說。

很多人都覺得CSS特別簡單，但其實真正寫好CSS並不容易，CSS的每一點其實內容都很多，就拿選取器來說，CSS選取器大概可以分為五類：

• 元素選取器

• 關係選取器

• 屬性選取器

• 偽類別選取器

• 偽對象選取器

元素選取器

選取器	名稱	描述
*	通配選取器	選擇所有的元素
E	元素選取器	選擇指定的元素
#idName	id選取器	選擇id屬性等於idName的元素
.className	class選取器	選擇class屬性包含className的元素

元素選取器只要是寫CSS都會經常用，這一塊的內容非常簡單，沒什麼特別要說的。

關係選取器

選取器	名稱	描述
E F	包含選取器	選擇所有包含在E元素裡面的F元素
E>F	子選取器	選擇所有作為E元素的子項目F
E+F	相鄰選取器	選擇緊貼在E元素之後的F元素
E~F	兄弟選取器	選擇E元素所有兄弟元素F

這裡要注意幾點：

• 子選取器只能選中字元素，而不能選中孫輩；而包含選擇符將會選中所有合格後代，包括兒子，孫子，孫子的孫子...

• 相鄰選擇符只會選中合格相鄰的兄弟元素；而兄弟選擇符會選中所有合格兄弟元素，不強制是緊鄰的元素。

• 在Android Browser4.2.*及以下，偽類別選取器:checked與兄弟選擇符一起使用會有一個bug，查看詳情。

屬性選取器

選取器	描述
E[att]	選擇具有att屬性的E元素
E[att="val"]	選擇具有att屬性且屬性值等於val的E元素
E[att~="val"]	選擇具有att屬性且屬性值其中一個等於val的E元素（包含只有一個值且該值等於val的情況）
E[att|="val"]	選擇具有att屬性且屬性值為以val開頭並用串連符-分隔的字串的E元素，如果屬性值僅為val，也將被選擇
E[att^="val"]	選擇具有att屬性且屬性值為以val開頭的字串的E元素
E[att$="val"]	選擇具有att屬性且屬性值為以val結尾的字串的E元素
E[att*="val"]	選擇具有att屬性且屬性值為包含val的字串的E元素

偽類別選取器

選取器	描述
E:link	設定超連結a在未被訪問前的樣式
E:visited	設定超連結a在其連結地址已被訪問過時的樣式
E:hover	設定元素滑鼠在其懸停時的樣式
E:active	設定元素在被使用者啟用（在滑鼠點擊與釋放之間發生的事件）時的樣式
E:focus	設定元素在成為輸入焦點（該元素的onfocus事件發生）時的樣式。(一般應用於表單元素)
E:checked	匹配使用者介面上處於選中狀態的元素E。(用於input type為radio與checkbox時)
E:enabled	匹配使用者介面上處於可用狀態的元素E。(一般應用於表單元素)
E:disabled	匹配使用者介面上處于禁用狀態的元素E。(一般應用於表單元素)
E:empty	匹配沒有任何子項目（包括text節點）的元素E
E:root	匹配E元素在文檔的根項目。在HTML中，根項目永遠是HTML
E:not(s)	匹配不含有s選擇符的元素E
E:first-child	匹配父元素的第一個子項目E
E:last-child	匹配父元素的最後一個子項目E
E:only-child	匹配父元素僅有的一個子項目E
E:nth-child(n)	匹配父元素的第n個子項目E
E:nth-last-child(n)	匹配父元素的倒數第n個子項目E
E:first-of-type	匹配同類型中的第一個同級兄弟元素E
E:last-of-type	匹配同類型中的最後一個同級兄弟元素E
E:only-of-type	匹配同類型中的唯一的一個同級兄弟元素E
E:nth-of-type(n)	匹配同類型中的第n個同級兄弟元素E
E:nth-last-of-type(n)	匹配同類型中的倒數第n個同級兄弟元素E

注意事項：

• 超連結的4種狀態(訪問前，滑鼠移至上方，當前被點擊，已訪問)，需要有特定的書寫順序才會生效；a:hover 必須位於 a:link 和 a:visited 之後，a:active 必須位於 a:hover 之後。

• E:first-child選擇符，E必須是它的兄弟元素中的第一個元素，換言之，E必須是父元素的第一個子項目。與之類似的偽類還有E:last-child，只不過情況正好相反，需要它是最後一個子項目。

關於:not()的用法

假定有個列表，每個清單項目都有一條底邊線，但是最後一項不需要底邊線。

 li:not(:last-child) {    border-bottom: 1px solid #ddd;}

上述代碼的意思是：給該列表中除最後一項外的所有清單項目加一條底邊線。是不是很方便。

關於:nth-child()的用法

要使E:nth-child(n)生效，E元素必須是某個元素的子項目，E的父元素最高是body，即E可以是body的子項目。:first-child、:last-child、:only-child、:nth-last-child(n)也是一樣。
nth-child(n)括弧裡的n可以是一個數字，一個關鍵字，或者一個公式。

:nth-child(length) /*參數是具體數字 length為整數*/:nth-child(n) /*參數是n,n從0開始計算*/:nth-child(n*length) /*n的倍數選擇，n從0開始算*/:nth-child(n+length) /*選擇大於等於length後面的元素*/:nth-child(-n+length) /*選擇小於等於length前面的元素*/:nth-child(n*length+1) /*表示隔幾選一*/:nth-child(2n) / :nth-child(even) /*表示偶數*/:nth-child(2n+1) / :nth-child(odd) /*表示奇數*/

關於:...-child和:...-of-type的差異

這兩個系列的屬性確實很相似，對於不熟悉的人可能很難區分。

E:first-of-type 總是能命中父元素的第1個為E的子項目，不論父元素第1個子項目是否為E；而E:first-child裡的E元素必須是它的兄弟元素中的第一個元素，否則匹配失效。E:last-of-type 與E:last-child也是同理。
E:nth-of-type(n)總是能命中父元素的第n個為E的子項目，不論父元素第n個子項目是否為E；而E:nth-child(n)會選擇父元素的第n個子項目E，如果第n個子項目不是E，則是無效選擇符，但n會遞增。
關於:nth-child()與:nth-of-type()的區別可以看這篇文章

用:empty區分空元素

選擇不包含子項目的p元素：

p:empty

選擇包含子項目的p元素：

p:not(:empty)

偽對象選取器

選取器	描述
E:before/E::before	在目標元素E的前面插入的內容。用來和content屬性一起使用
E:after/E::after	在目標元素E的後面插入的內容。用來和content屬性一起使用
E:first-letter/E::first-letter	設定元素內的第一個字元的樣式
E:first-line/E::first-line	設定元素內的第一行的樣式
E::placeholder	設定元素文字預留位置的樣式。(一般用於input輸入框)
E::selection	設定元素被選擇時的字型顏色和背景顏色

注意事項：

• ::placeholder在使用時需要加上各個瀏覽器的首碼；除了Firefox是 ::[prefix]placeholder，其他瀏覽器都是使用 ::[prefix]input-placeholder。

總結

選取器用得好其實可以讓我們少些很多代碼。其實還有一些東西沒有展開來講，比如:before和:after，後面專門寫一篇文章來說。