CSS常用選擇器實踐

CSS3選擇器

1、標簽選擇器

顧名思義，標簽選擇器就是用標簽名稱作為選擇器。

1.1、樣例代碼

1.2、效果圖

1.3、說明

盡管標簽選擇器用起來很簡便，但缺點也很明顯。 1、在一個復(fù)雜的頁面或構(gòu)圖中，一定會有很多同名標簽，那么多個元素就會共享相同的樣式，本來共享是好事，能節(jié)約代碼量，但問題出在共享的粒度實在太粗了，可能經(jīng)常會出現(xiàn)我們預(yù)料之外的效果。 2、我們希望代碼盡量語義化，也就是讓我們的代碼讀起來就像讀自然語言一樣，這樣便于理解和維護，但標準的HTML標簽名并不能體現(xiàn)具體的業(yè)務(wù)含義。

2、類選擇器

類選擇器是指為元素指定一個class屬性，也稱為樣式類，然后在樣式表中通過這個屬性值來引用元素。在CSS中以.class-name的格式來選擇對應(yīng)的元素。

2.1、樣例代碼

2.2、效果圖

2.3、說明

可以為每個元素起不同的類名來區(qū)分每個元素，如red、yellow和green，也可以為有共同屬性的元素起相同的類名，如light，還可以為一個元素分配多個類名，多個類名間用空格分隔，如light red。

3、后代選擇器

DOM結(jié)構(gòu)是樹狀結(jié)構(gòu)，也就是元素可以一層一層地嵌套，便于有條理地組織內(nèi)容。相應(yīng)地，對于內(nèi)層元素的類選擇器，為了提高可讀性，我們應(yīng)該讓它體現(xiàn)出DOM的層次結(jié)構(gòu)，按照“父類 子類”的格式來書寫。

3.1、樣例代碼

3.2、效果圖

3.3、說明

使用后代選擇器，從技術(shù)上是為了避免選擇到超出范圍的元素，更重要的是，這樣寫能使語義更清晰，令CSS選擇器與DOM結(jié)構(gòu)保持同樣的層級關(guān)系，例如.tree.branch .leaf就體現(xiàn)了“樹干→樹枝→樹葉”這樣的遞進結(jié)構(gòu)。

4、偽類選擇器

偽類選擇器用于選擇處于特殊位置或狀態(tài)的元素，例如選擇一堆元素中的第1個或最后一個元素，或者隔一個選一個元素，或者選擇處于鼠標指針懸停狀態(tài)的元素。下面是其中幾個常用的：

4.1、:first-child和:last-child

從名稱一望即知，:first-child用于選擇第1個元素，:last-child用于選擇最后一個元素。

4.2、:nth-child()

:nth-child()偽類較為廣泛的用法是:nth-child(odd)和:nth-child(even)，其中:nth-child(odd)表示選擇所有第奇數(shù)個元素，:nth-child(even)表示選擇所有第偶數(shù)個元素。

4.3、:nth-child(an+b)

:nth-child()函數(shù)還可以接收一個形如an+b的表達式作為參數(shù)，其中a和b是整數(shù)，n是從0開始的自然數(shù)列，由此表達式得到的數(shù)列，即為被選中的元素的下標，元素的下標從1開始計算。

4.5、:not()

:not()偽類用于排除掉一些元素，例如:not(:first-child)表示排除掉第1個元素，:not(:nth-child(3))表示排除掉第3個元素。

以上樣例是從100個數(shù)字中挑選出素數(shù)，把素數(shù)的背景設(shè)置為橙色。這里的選擇器共有5行。前4行分別把數(shù)字2、3、5、7標明為素數(shù)。第5行很長，我們拆開看，它的第1部分是.prime-numbers div，意思是所有