精通高級CSS選擇器

 今天看了一下CSS選擇器的一些知識，在此做個總結！

CSS的重要性大家都知道，但是對一個新手來說對CSS的選擇器的重要性可能沒有給予更多的關注，瞭解CSS選擇器對代碼的簡潔很有幫助。當然其中一些選擇器不被所有瀏覽器所接受，但是我們不能就因爲那個噁心的瀏覽器而不重視這部分內容，所以我們要漸進性增強！

1. 屬性CSS選擇器

 

有6個不同類型的屬性CSS選擇器：

• [att=value]
  該屬性有指定的確切的值。
• [att~=value]
  該屬性的值必須是一系列用空格隔開的多個值，(比如，class=”title featured home”)，而且這些值中的一個必須是指定的值”value”。
• [att|=value]
  屬性的值就是“value”或者以“value”開始並立即跟上一個“-”字符，也就是“value-”。(比如lang=”zh-cn”)
• [att^=value]
  該屬性的值以指定值開始。
• [att*=value]
  該屬性的值包含指定的值(而無論其位置)。
• [att$=value]
  該屬性的值以指定的值結束

這裏有個需要注意的是 [att~=value] 和 [att*=value].  [att~=value] 這個是屬性值之間必須有空格, [att*=value]之間不一定需要空格，所以 [att*=value]可以實現[att~=value]的功能！

2. 僞類

動態僞類
之所以被稱爲動態僞類是因爲它們並不存在於HTML中——而是隻有當用戶和網站交互的時候纔會呈現。
有兩類動態僞類：鏈接 和用戶行爲。鏈接就是:link 和:visited，而用戶行爲包括:hover、:active 和:focus。對於這四個錨點僞類的設置，有一點需要特別注意，那就是他們的先後順序，要讓他們遵守一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active。

對於:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

3. CSS 3 結構僞類

 

這節內容纔是關鍵，也是CSS3選擇器最新部分，有人也稱這種選擇器爲CSS3結構類，下面我們通過實際的應用來具體瞭解他們的使用和區別，首先列出他具有的選擇方法：

1. :fist-child選擇某個元素的第一個子元素；
2. :last-child選擇某個元素的最後一個子元素；
3. :nth-child()選擇某個元素的一個或多個特定的子元素；
4. :nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
5. :nth-of-type()選擇指定的元素；
6. :nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；
7. :first-of-type選擇一個上級元素下的第一個同類子元素；
8. :last-of-type選擇一個上級元素的最後一個同類子元素；
9. :only-child選擇的元素是它的父元素的唯一一個了元素；
10. :only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
11. :empty選擇的元素裏面沒有任何內容。
12. 重點講解   :nth-child

13. 語法：

    :nth-child(an+b)

    爲什麼選擇她，因爲我認爲，這個選擇器是最多學問的一個了。很可惜，據我所測，目前能較好地支持她的只有Opera9+和Safari3+。

    描述：

    僞類:nth-child()的參數是an+b，如果按照w3.org上的描述，寫成中文，很可能會讓人頭暈，再加上筆者的文筆水平有限，所以我決定避開an+b的說法，把它拆分成5種寫法共5部分來說明。

    第一種：簡單數字序號寫法

    :nth-child(number)

    直接匹配第number個元素。參數number必須爲大於0的整數。

    例子：
    

    li:nth-child(3){background:orange;}/*把第3個LI的背景設爲橙色*/

    第二種：倍數寫法

    :nth-child(an)

    匹配所有倍數爲a的元素。其中參數an中的字母n不可缺省，它是倍數寫法的標誌，如3n、5n。

    例子：

    li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍數的LI的背景設爲橙色*/

    第三種：倍數分組匹配

    :nth-child(an+b) 與 :nth-child(an-b)

    先對元素進行分組，每組有a個，b爲組內成員的序號，其中字母n和加號+不可缺省，位置不可調換，這是該寫法的標誌，其中a,b均爲正整數或0。如3n+1、5n+1。但加號可以變爲負號，此時匹配組內的第a-b個。（其實an前面也可以是負號，但留給下一部分講。）

    例子：

    li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3個爲一組的第1個LI*/

    li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、從第5個開始每3個爲一組的第1個LI*/

    li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍數減1個LI*/

    li:nth-child(3n±0){background:orange;}/*相當於(3n)*/

    li:nth-child(±0n+3){background:orange;}/*相當於(3)*/

    第四種：反向倍數分組匹配

    :nth-child(-an+b)

    此處一負一正，均不可缺省，否則無意義。這時與:nth-child(an+1)相似，都是匹配第1個，但不同的是它是倒着算的，從第b個開始往回算，所以它所匹配的最多也不會超過b個。

    例子：

    li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2個LI*/

    li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8個（包括第8個）LI，這個較爲實用點，用來限定前面N個匹配常會用到*/

    第五種：奇偶匹配

    :nth-child(odd) 與 :nth-child(even)

    分別匹配序號爲奇數與偶數的元素。奇數(odd)與(2n+1)結果一樣；偶數(even)與(2n+0)及(2n)結果一樣。

    附：例子效果圖

14. 更多詳細的參考

15. http://www.w3cplus.com/css3/pseudo-class-selector

16. http://cssshare.com/1/jing-tong-gao-ji-cssxuan-ze-qi（注：此文章在寫到[att*=value]和[att$=value]寫反了！）

17. 睡覺！不早了！