CSS選擇器整理-css教學-PHP中文網

首頁

web前端

css教學

CSS選擇器整理

高洛峰

Feb 09, 2017 am 11:23 AM

css選擇器

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

元素選擇器
關係選擇器
屬性選擇器
選擇器
名稱

描述

*選擇指定的元素id選擇器選擇id屬性等於idName的元素CSS關係選擇器選擇器名稱描述子選擇器

		配選擇器
#idName
.className	元素選擇器只要是寫	都會常用，這一塊的內容非常簡單，沒什麼特別要說的。

		E >F

選擇所有作為E元素的子元素F

E+FE~F兄弟選擇器選擇E元素所有兄弟元素F這裡要注意幾點：子選擇器只能選中孫選器元素，而不能選中孫字元素；包含選擇符將會選中所有符合條件的後代，包括兒子，孫子，孫子的孫子...在Android Browser4.2.*及以下，偽類選擇器與兄弟選擇符一起使用會有一個bug，查看詳情。描述 [att="val" ]



`相鄰選擇符只會選中符合條件的相鄰的兄弟元素；而兄弟選擇符會選中所有符合條件的兄弟元素，不強制是緊鄰的元素。`		:checked
`屬性選擇器`		選擇器
		選擇具有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元素

偽類選擇器

:0 設定超連結a在其連結位址已被存取過時的樣式設定元素滑鼠在其懸停時的樣式E:focusE:checkedE:enabledE:disabledE:emptyEroot:root 。在HTML中，根元素永遠是HTMLE:not(s)匹配不含s選擇符的元素EE:first-childE:first-child一個子元素E匹配父元素的最後一個子元素E匹配父元素的第n個子元素EE:first-of-typeE:last--type-type-type的最後一個同級兄弟元素EE:only-of-type匹配同類型中的唯一的一個同級兄弟元素E匹配同類型中的第n個同級兄弟元素E匹配同類型中的倒數第n個同級兄弟元素E

選擇器描述

E:link

E:hover

。使用者啟動（滑鼠點擊與釋放之間發生的事件）時的樣式

設定元素在成為輸入焦點（此元素的onfocus事件發生）時的樣式。 (一般應用於表單元素)

匹配使用者介面上處於選取狀態的元素E。 (用於input type為radio與checkbox時)

匹配使用者介面上處於可用狀態的元素E。 (一般應用於表單元素)

匹配使用者介面上處於停用狀態的元素E。 (一般應用於表單元素)

匹配沒有任何子元素（包括text節點）的元素E

E:last-child

E:only-childE

E:nth-child(n)

E:nth-last-child(n) E:nth-last-child(n)

E:nth-last-child(n)個子元素E

匹配同類型中的第一個同級兄弟元素E

)

E:nth-last-of-type(n)

<p>注意事项：</p>
<ul class=" list-paddingleft-2">
<li><p>超链接的4种状态(访问前，鼠标悬停，当前被点击，已访问)，需要有特定的书写顺序才能生效；<strong>a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后</strong>。</p></li>
<li><p><code>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選擇器大概可以分為五類：

元素選擇器
關係選擇器
屬性選擇器
選擇器
名稱

描述

*選擇指定的元素id選擇器選擇id屬性等於idName的元素CSS關係選擇器選擇器名稱描述子選擇器

		配選擇器
#idName
.className	元素選擇器只要是寫	都會常用，這一塊的內容非常簡單，沒什麼特別要說的。

		E >F

選擇所有作為E元素的子元素F



`相鄰選擇符只會選中符合條件的相鄰的兄弟元素；而兄弟選擇符會選中所有符合條件的兄弟元素，不強制是緊鄰的元素。`		:checked
`屬性選擇器`		選擇器
		選擇具有att屬性且屬性值等於val的E元素

E[att~="val"]

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

E[att^="val"]

偽類選擇器

選擇器描述

E:link

E:hover

。使用者啟動（滑鼠點擊與釋放之間發生的事件）時的樣式

設定元素在成為輸入焦點（此元素的onfocus事件發生）時的樣式。 (一般應用於表單元素)

匹配使用者介面上處於選取狀態的元素E。 (用於input type為radio與checkbox時)

匹配使用者介面上處於可用狀態的元素E。 (一般應用於表單元素)

匹配使用者介面上處於停用狀態的元素E。 (一般應用於表單元素)

匹配沒有任何子元素（包括text節點）的元素E

E:last-child

E:only-childE

E:nth-child(n)

E:nth-last-child(n) E:nth-last-child(n)

E:nth-last-child(n)個子元素E

匹配同類型中的第一個同級兄弟元素E

)

E:nth-last-of-type(n)

<p>注意事項：</p>
<ul class=" list-paddingleft-2">
<li><p>超連結的4種狀態(訪問前，滑鼠懸停，目前被點擊，已訪問)，需要有特定的書寫順序才能生效；<strong>a:hover 必須位於a:link 和a :visited 之後，a:active 必須位於a:hover 之後</strong>。 </p></li>
<li><p><code>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的前面插入的內容。用來和content屬性一起使用: /E::first-line設定元素文字佔位符的樣式。 (一般用於input輸入框)設定元素被選擇時的字體顏色和背景顏色::[prefix]placeholder::[prefix]input-placeholder。 :before和:after

選擇器	描述
`E:after`/`E::after`	在目標元素E的後面插入的內容。用來和content屬性一起使用
`E:first-letter`/`E::first-letter`	設定元素內的第一個字元的樣式
`設定元素內的第一行的樣式`	E::placeholder
E::selection
注意事項：使用於館時需要加上各個瀏覽器的前綴；除了Firefox是	，其他瀏覽器都是使用
總結	選擇器用得好其實可以讓我們少些很多程式碼。其實還有一些東西沒有展開來講，像是