<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 |
设置元素被选择时的字体颜色和背景颜色 |
注意事项：
总结
选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲，比如:before和:after，后面专门写一篇文章来说。
很多人都覺得CSS特別簡單，但其實真正寫好CSS並不容易，CSS的每一點其實內容都很多，就拿選擇器來說，CSS選擇器大概可以分為五類：
描述
| * |
配選擇器 | 選擇指定的元素
|
| id選擇器 | 選擇id屬性等於idName的元素
| 元素選擇器只要是寫 | CSS都會常用，這一塊的內容非常簡單，沒什麼特別要說的。 |
關係選擇器
| 選擇器 | 名稱 | 描述
| |
E >F |
子選擇器
選擇所有作為E元素的子元素F
E+F
|
| E~F |
兄弟選擇器
選擇E元素所有兄弟元素F
| 這裡要注意幾點： |
| 子選擇器只能選中孫選器元素，而不能選中孫字元素；包含選擇符將會選中所有符合條件的後代，包括兒子，孫子，孫子的孫子...
相鄰選擇符只會選中符合條件的相鄰的兄弟元素；而兄弟選擇符會選中所有符合條件的兄弟元素，不強制是緊鄰的元素。 |
| 在Android Browser4.2.*及以下，偽類選擇器:checked | 與兄弟選擇符一起使用會有一個bug，查看詳情。
屬性選擇器 |
|
選擇器 |
描述
| [att="val" ] |
選擇具有att屬性且屬性值等於val的E元素 |
E[att~="val"]
E[att^="val"]
選擇具有att屬性且屬性值為以val開頭的字串的E元素
| | E[att$="val"]
選擇具有att屬性且屬性值為以val結尾的字串的E元素
| E[att*="val"] |
att屬性且屬性值為包含val的字串的E元素
偽類選擇器
| 選擇器 |
描述 |
E:link | :0 | 設定超連結a在其連結位址已被存取過時的樣式
|
| 設定元素滑鼠在其懸停時的樣式
。使用者啟動（滑鼠點擊與釋放之間發生的事件）時的樣式 |
|
E:focus
設定元素在成為輸入焦點（此元素的onfocus事件發生）時的樣式。 (一般應用於表單元素) |
|
E:checked
匹配使用者介面上處於選取狀態的元素E。 (用於input type為radio與checkbox時) |
|
E:enabled
匹配使用者介面上處於可用狀態的元素E。 (一般應用於表單元素) |
|
E:disabled
匹配使用者介面上處於停用狀態的元素E。 (一般應用於表單元素) |
|
E:empty
匹配沒有任何子元素（包括text節點）的元素E |
|
Eroot:root 。在HTML中，根元素永遠是HTML
| E:not(s) |
匹配不含s選擇符的元素E
| E:first-childE:first-child一個子元素E |
E:last-child | 匹配父元素的最後一個子元素E |
E:only-childE | |
E:nth-child(n) | 匹配父元素的第n個子元素E |
E:nth-last-child(n) |
E:nth-last-child(n) |
E:nth-last-child(n)個子元素E
|
|
E:first-of-type
匹配同類型中的第一個同級兄弟元素E |
|
E:last--type-type-type的最後一個同級兄弟元素E
| E:only-of-type |
匹配同類型中的唯一的一個同級兄弟元素E
|
| 匹配同類型中的第n個同級兄弟元素E
|
| 匹配同類型中的倒數第n個同級兄弟元素E
<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:after/E::after
|
在目標元素E的後面插入的內容。用來和content屬性一起使用 |
E:first-letter/E::first-letter
|
設定元素內的第一個字元的樣式 | : / E::first-line
設定元素內的第一行的樣式 |
E::placeholder |
設定元素文字佔位符的樣式。 (一般用於input輸入框)
|
| 設定元素被選擇時的字體顏色和背景顏色
| ::[prefix]placeholder，其他瀏覽器都是使用 | ::[prefix]input-placeholder 。
|
選擇器用得好其實可以讓我們少些很多程式碼。其實還有一些東西沒有展開來講，像是 | :before 和:after ，後面專門寫一篇文章來說。 更多CSS選擇器整理相關文章請關注PHP中文網！ |
|
| 
