CSS 偽類選擇器：如何使用 CSS3 偽類

CSS3 是個(gè)好東西，但也很容易被她的變形（transform）和動畫（其中許多特性因?yàn)g覽器廠商而異）特性所迷惑，因而忘了那些已經(jīng)被添加到標(biāo)準(zhǔn)規(guī)范中的最為基本的選擇器。許多強(qiáng)大的新偽類選擇器（最新的 W3C 規(guī)范中列出了 16 條）使得我們能夠在新的標(biāo)準(zhǔn)范圍內(nèi)使用元素選擇器。

在探討這些新的 CSS3 偽類之前，先簡要回顧追溯一下這些在 Web 應(yīng)用中常常被誤解的 CSS 選擇器。

1. 偽類簡史

在 1996 年，當(dāng) CSS1 的規(guī)范完成后，一些偽類選擇器已被囊括在內(nèi)，其中許多你幾乎每天都在使用。例如：

• :link
• :visited
• :hover
• :active

這些狀態(tài)都可以被應(yīng)用到某個(gè)元素，通常是以 “a:偽類名”的形式。令人難以置信的是，在 W3C 于 1997 年 12 月發(fā)布 HTML4 規(guī)范之前，這些偽類已經(jīng)被極為廣泛地使用了。

1.1 CSS2 來了

于是 CSS2 來了。其建議規(guī)范在兩年之后的 1998 年 5 月發(fā)布。隨之令人興奮的是添加了 :first-child 和 :lang() 新偽類。

:lang

有許多種表示文檔語言類型的方法，如果你使用 HTML5，很可能會直接在 DOCTYPE 聲明之后放置 語句（指定本地語種）。當(dāng)然，你也可以使用 :lang(en) 偽類來修飾頁面元素，對于語言動態(tài)變化的情況，這將非常有用。

:first-child

您可能已經(jīng)在文檔中使用 :first-child 屬性。它通常用于添加或刪除列表中第一個(gè)元素的上邊框。奇怪的是，卻沒有 :last-child 這樣的偽類與之對應(yīng)。于是不得等到 CSS3 規(guī)范的對這兩個(gè)兄弟偽類的支持。

1.2 為何使用偽類？

偽類如此實(shí)用的原因在于它們允許動態(tài)地設(shè)置內(nèi)容樣式。比如上面的 <a> 例子，我們能夠描述當(dāng)用戶與鏈接進(jìn)行交互時(shí)，鏈接該如何呈現(xiàn)樣式。正如我們看到的，新的偽類允許我們根據(jù)元素在文檔中的位置或狀態(tài)，動態(tài)地設(shè)置其樣式。

16 個(gè)全新偽類已經(jīng)成為 W3C 的 CSS 建議的一部分，它們被分成四組：結(jié)構(gòu)偽類、UI 元素的狀態(tài)偽類、一個(gè)目標(biāo)（target）偽類和一個(gè)否定偽類。

W3C 是 CSS 之家

現(xiàn)在我們一起探究看看如何使用這 16 個(gè)新偽類選擇器。我會使用和 W3C 相同的標(biāo)識符來命名 CSS 類，比如 E 代表元素（element），n 表示數(shù)字（number），s 表示選擇器（selector）。

1.3 示例代碼

大部分新選擇器都會給出參考示例，以便直觀地看到代碼呈現(xiàn)效果。這里會涉及一張適用于 iPhone 并且使用了 CSS3 偽類的表單。

請注意，這張表單中大部分樣式可以使用 id 和類（class）選擇器設(shè)定。即便如此，仍然可以使用新偽類針為這個(gè)表單錦上添花。點(diǎn)擊這里查看頁面示例

<form><hgroup><h1>Awesome Widgets</h1><h2>All the cool kids have got one</h2></hgroup><fieldset id="email"><legend>Where do we send your receipt?</legend><label for="email">Email Address</label><input type="email" name="email" placeholder="Email Address" /></fieldset><fieldset id="details"><legend>Personal Details</legend><select name="title" id="field_title"><option value="" selected="selected">Title</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Miss">Miss</option></select><label for="firstname">First Name</label><input name="firstname" placeholder="First Name" /><label for="initial">Initial</label><input name="initial" placeholder="Initial" size="3" /><label for="surname">Surname</label><input name="surname" placeholder="Surname" /></fieldset><fieldset id="payment"><legend>Payment Details</legend><label for="cardname">Name on card</label><input name="cardname" placeholder="Name on card" /><label for"cardnumber">Card number</label><input name="cardnumber" placeholder="Card number" /><select name="cardType" id="field_cardType"><option value="" selected="selected">Select Card Type</option><option value="1">Visa</option><option value="2">American Express</option><option value="3">MasterCard</option></select><label for="cardExpiryMonth">Expiry Date</label><select id="field_cardExpiryMonth" name="cardExpiryMonth"><option selected="selected" value="mm">MM</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>/<select id="field_cardExpiryYear" name="cardExpiryYear"><option value="yyyy">YYYY</option><option value="2011">11</option><option value="2012">12</option><option value="2013">13</option><option value="2014">14</option><option value="2015">15</option><option value="2016">16</option><option value="2017">17</option><option value="2018">18</option><option value="2019">19</option></select><label for"securitycode">Security code</label><input name="securitycode" type="number" placeholder="Security code" size="3" /><p>Would you like Insurance?</p><input type="radio" name="Insurance" id="insuranceYes" /><label for="insuranceYes">Yes Please!</label><input type="radio" name="Insurance" id="insuranceNo" /><label for="insuranceNo">No thanks</label></fieldset><fieldset id="submit"><button type="submit" name="Submit" disabled>Here I come!</button></fieldset> </form>

使用前和使用后的表單樣式

2. 結(jié)構(gòu)偽類

根據(jù) W3C 規(guī)范，結(jié)構(gòu)偽類用來做下面的事：

…允許選擇位于文檔樹的額外信息，但不能用其他簡單的選擇器或組合選擇器代替。

這意味著我們擁有了能根據(jù)選擇器在文檔中的所處位置，動態(tài)選擇內(nèi)容的選擇器。那么讓我們從文檔本身開始，即 :root 偽類。

W3C 上的 Level 3 選擇器

E:root

:root 偽類選擇頁面的根元素。十有八九根節(jié)點(diǎn)是 <html> 元素，例如：

:root { background-color: #fcfcfc; }

除了給 <html> 元素設(shè)定樣式，這個(gè)偽類基本沒什么價(jià)值，可能也就描述性稍強(qiáng)些：

html { background-color: #fcfcfc; }

回到那張 iPhone 表單，為其添加基本的文本和背景樣式：

:root { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); background: url(…/images/background.png) no-repeat #282826; }

E:nth-child(n)

:nth-child() 選擇器可能需要一些實(shí)踐才能完全理解。最簡單的記憶方法是使用關(guān)鍵詞“奇數(shù)或偶數(shù)”（odd 或 even），因?yàn)樵陲@示由行列組成的數(shù)據(jù)表格時(shí)，這將非常有用。例如，我們可以使用下列內(nèi)容：

ul li:nth-child(odd) { background-color: #666; color: #fff; }

這將使無序列表中的每個(gè)奇數(shù)行高亮顯示。您可能會發(fā)現(xiàn)在表格中使用這種技術(shù)非常方便。例如：

table tr:nth-child(even) { … }

:nth-child 選擇器更明確靈活，因此，你可以選擇列表的第三個(gè)元素，像這樣：

li:nth-child(3) { … }

請注意 n 并不是從零開始，第一個(gè)元素是 :nth-child(1)，第二個(gè)是 :nth-child(2)，以此類推。

我們也可以利用一些簡單的代數(shù)，使它變得更加精彩。考慮以下代碼：

li:nth-child(2n) { … }

當(dāng)我們以這種方式使用 n，它代表對所有正整數(shù)，直到文檔耗盡可選擇的元素。在這種情況下，它會選擇下列列表項(xiàng)：

• 未選擇元素 (2 × 0)
• 第 2 個(gè)元素 (2 × 1)
• 第 4 個(gè)元素 (2 × 2)
• 第 6 個(gè)元素 (2 × 3)
• 第 8 個(gè)元素 (2 × 4)
• 等等…

這實(shí)際上和使用 :nth-child(even) 完全一致。因此我們混入點(diǎn)東西：

li:nth-child(5n) { … }

對應(yīng)選擇的節(jié)點(diǎn)元素：

• 未選擇元素 (5 × 0)
• 第 5 個(gè)元素 (5 × 1)
• 第 10 個(gè)元素 (5 × 2)
• 第 15 個(gè)元素 (5 × 3)
• 第 20 個(gè)元素 (5 × 4)
• 等等…

對于長列表或表格而言，也許這將很有用，也可能完全無用。我們還可以在這一公式中執(zhí)行數(shù)字加減法：

li:nth-child(4n + 1) { … }

對應(yīng)選擇的節(jié)點(diǎn)元素：

• 第 1 個(gè)元素 ((4 × 0) + 1)
• 第 5 個(gè)元素 ((4 × 1) + 1)
• 第 9 個(gè)元素 ((4 × 2) + 1)
• 第 13 個(gè)元素 ((4 × 3) + 1)
• 第 17 個(gè)元素 ((4 × 4) + 1)
• 等等…

這里 SitePoint 指出了一個(gè)怪癖的功能，如果你將 n 設(shè)置為負(fù)值，則可以像這樣選擇前 x 項(xiàng)。

li:nth-child(-n + x) { … }

如果你期望選擇前 5 項(xiàng)，可以這樣寫：

li:nth-child(-n + 5) { … }

對應(yīng)選擇的節(jié)點(diǎn)元素：

• 第 5 個(gè)元素 (-0 + 5)
• 第 4 個(gè)元素 (-1 + 5)
• 第 3 個(gè)元素 (-2 + 5)
• 第 2 個(gè)元素 (-3 + 5)
• 第 1 個(gè)元素 (-4 + 5)
• 未選擇元素 (-5 + 5)
• 未選擇元素 (-6 + 5)
• 等等…

如果你想要根據(jù)熱門程度來列數(shù)據(jù)條目，并予以突出顯示，也就是說，前十項(xiàng)可能是很有用的。

WebDesign & Such 創(chuàng)建了 斑馬樣式示例，這應(yīng)該是一個(gè) :nth-child 的最佳實(shí)踐。

使用 CSS3 設(shè)置表格的斑馬樣式

如果沒有需要設(shè)置樣式的表格，那么你可以 Webvisionary Awards 獎已經(jīng)做的和使用：第n -孩子式交替其網(wǎng)站部分。這里的css：

如果你的表格都不需要設(shè)置樣式，那么你可以像 Webvisionary Awards 那樣，使用 :nth-child 設(shè)置網(wǎng)站區(qū)塊的交替樣式。CSS 代碼如下：

section > section:nth-child(even) { background:rgba(255,255,255,.1) url("../images/hr-damaged2.png") 0 bottom no-repeat; }

其效果很細(xì)微，但它增加了一個(gè)陳舊瀏覽器不支持的細(xì)節(jié)。

Webvisionary Awards 上使用的 :nth-child 選擇器

iPhone 表單案例

繼續(xù)回到那張 iPhone 表單案例，這個(gè)案例中幾乎很少地方可以使用 :nth-child 偽類，但值得注意的一點(diǎn)是，我們期望對前三個(gè)字段集的 label 標(biāo)簽隱藏，取而代之使用占位符（placeholder）文本替代。CSS 代碼如下：

form:nth-child(-n+3) label { display: none; }

這里，我們尋找 <form> 元素的前三個(gè)子節(jié)點(diǎn)，然后選取 label 元素，可以使用 display:none; 來隱藏。

E:nth-last-child(n)

我們并不僅僅滿足于 :nth-child() 偽類，W3C 也給我們提供了 :nth-last-child(n) 偽類。它和 :nth-child() 的表現(xiàn)非常相似，除了反向操作，從最后一個(gè)向開始計(jì)算的功能。

li:nth-last-child(1) { … }

上述將選擇列表中的最后一個(gè)元素，而下面將選擇倒數(shù)第二個(gè)元素：

li:nth-last-child(2) { … }

當(dāng)然，你也可以使用其他規(guī)則：

li:nth-last-child(2n+1) { … }

但你可能更傾向于使用以下方法選擇最后五個(gè)列表元素（以上面討論的邏輯為基礎(chǔ)）：

li:nth-last-child(-n+5) { … }

如果這仍然沒有太大的意義，Lea Verou 創(chuàng)造了一個(gè)有用的 CSS3 結(jié)構(gòu)偽類選擇器測試工具，值得一試。

CSS3 結(jié)構(gòu)偽類選擇器測試工具

iPhone 表單案例

在案例中，我們可以使用 :nth-last-child 來為“Card number”字段添加圓角。以下 CSS 代碼可能過于具體，但至少提供了一個(gè)關(guān)聯(lián)偽類的方法：

fieldset:nth-last-child(2) input:nth-last-of-type(3) { border-radius: 10px; }

我們首先抓住倒數(shù)第二個(gè)字段，選擇其中倒數(shù)第三個(gè)字段（這個(gè)案例中，是“Card Number”字段）。然后，我們添加一個(gè)圓角效果（border-radius）。

:nth-of-type(n)

現(xiàn)在我們將做得更加具體，只為特定類型的元素設(shè)定樣式。例如，假設(shè)你想使得文章第一段具有較大的字體。CSS 代碼如下：

article p:nth-of-type(1) { font-size: 1.5em; }

也許你要文章中的部分圖片右對齊，另一部分左對齊。則可以使用關(guān)鍵字來控制：

article img:nth-of-type(odd) { float: right; } article img:nth-of-type(even) { float: left; }

通過 :nth-child() 和 :nth-last-child(), 你可以使用代數(shù)表達(dá)式：

article p:nth-of-type(2n+2) { … } article p:nth-of-type(-n+1) { … }

值得記住的是如果需要獲得這些指定的目標(biāo)元素，使用描述性的 CSS 類名可能更合理。

Simon Foster 創(chuàng)建了一個(gè) 關(guān)于 45 張 RPM 唱片集的漂亮圖表，并且使用 :nth-of-type 來為某些數(shù)據(jù)設(shè)置樣式。以下是他的代碼片段，CSS 中各流派類型都做了區(qū)分。

ul#genre li:nth-of-type(1) {width:32.9%;background:url(images/orangenoise.jpg); } ul#genre li:nth-of-type(2) {width:15.2%;background:url(images/bluenoise.jpg); } ul#genre li:nth-of-type(3) {width:13.1%;background:url(images/greennoise.jpg); }

網(wǎng)站上是這樣呈現(xiàn)的：

For the Record 中的 :nth-of-type 選擇器應(yīng)用

iPhone 表單案例

比方說，我們希望偶數(shù)序號的輸入框元素有底部圓角。可以用 CSS 實(shí)現(xiàn)這一點(diǎn)：

input:nth-of-type(even) { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

該案例中，我們只期望應(yīng)用到 “payment” 字段，因?yàn)閭€(gè)人信息含有三個(gè)文本輸入框。處理方法有些棘手，要確保不會選擇任何單選框。最終 CSS 代碼：

#payment input:nth-of-type(even):not([type=radio]) { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom: 1px solid #999; margin-bottom: 10px; }

我們將稍后講解 :not 偽類。

:nth-last-of-type(n)

現(xiàn)在來看看 :nth-last-of-type() 從選定元素的末尾開始，并且倒序工作。

要選擇文章的最后一段，可以這樣使用：

article p:nth-last-of-type(1) { … }

當(dāng)文章不確定是否以段樓你可能會選擇這個(gè)選擇器來代替 :last-child 偽類。

:first-of-type 和 :last-of-type

如果 :nth-of-type() 和 :nth-last-of-type() 對你而言不太靈活，你可以使用更簡單的選擇器取而代之，例如：

article p:nth-of-type(1) { font-size: 1.5em; }

也可以這么搞：

article p:first-of-type { font-size: 1.5em; }

正如你所期望的那樣，使用 :last-of-type 效果完全一樣，只不過從后續(xù)元素開始查找而已。

iPhone 表單案例

我們可以在這張表單中結(jié)合使用 :first-of-type 和 :last-of-type，特別是用于制作圓角。CSS 如下：

fieldset input:first-of-type:not([type=radio]) { border-top-left-radius: 10px; border-top-right-radius: 10px; }fieldset input:last-of-type:not([type=radio]) { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

第一行 CSS 對所有具有 :first-of-type 偽類的 input 元素增加了圓角上邊框，并且所在字段不是單選按鈕。第二行對字段內(nèi)的最后一個(gè) input 元素增加圓角下邊框。

:only-of-type

還有另一個(gè)選擇器 :only-of-type()。用于選擇那些和它父元素中與自身同類型的元素。例如下面的代碼：

p { font-size: 18px; }

以及：

p:only-of-type { font-size: 18px; }

第一個(gè)選擇器將影響到頁面中的所有 p 元素，第二個(gè)選擇器只會影響它父親節(jié)點(diǎn)下的所有 p 元素。

如果數(shù)據(jù)庫查詢只返回一個(gè)結(jié)果數(shù)據(jù)，為這個(gè)內(nèi)容設(shè)置樣式時(shí)，用 :only-of-type 可能會很方便。

Devsnippet 創(chuàng)建了一個(gè) Demo，說明如何在多個(gè)圖片中為單個(gè)圖片定義樣式。

Devsnippet’s 的 :only-of-type 案例

iPhone 表單案例

這張表單中，我們可以確保所有輸入字段，無論在頂部還是底部，都有圓角效果，并且是該輸入字段的唯一子節(jié)點(diǎn)。CSS 代碼如下：

fieldset input:only-of-type { border-radius: 10px; }

:last-child

這是一個(gè)奇怪的地方：:first-child 是 CSS2 的規(guī)范，但 :last-child 卻在 CSS3 中才出現(xiàn)。也不需要過多語言解釋，:last-child 用于選擇父元素下的最后一個(gè)子節(jié)點(diǎn)。例如：

li { border-bottom: 1px solid #ccc; }li:last-child { border-bottom: none; }

這是一個(gè)從列表底部消除邊框的有用方法，在 WordPress 小工具中可以經(jīng)常看到這種應(yīng)用。

Rachel Andrew 在他的 Cleaner Code With CSS3 Selectors 文章里談?wù)摿?:last-child 和其他 CSS 偽類。他告訴我們?nèi)绾问褂眠@個(gè)偽類創(chuàng)建一份良好格式的圖片畫廊，而無需額外的 CSS 類。

Rachel Andrew 的 :last-child 偽類使用案例

:only-child

如果某個(gè)元素是它的父節(jié)點(diǎn)的唯一子節(jié)點(diǎn)，那么你可以使用 :only-child 選擇它。不像 :only-of-type 偽類，并且和元素類型無關(guān)。例如：

li:only-child { … }

我們可以使用它來選擇 <ul> 或 <ol> 中的單個(gè)列表項(xiàng)。

:empty

最后，結(jié)構(gòu)偽類中，我們還有一個(gè) :empty。毫不奇怪，這個(gè)選擇器只會選擇那些沒有子節(jié)點(diǎn)和文本節(jié)點(diǎn)的元素。如果從數(shù)據(jù)庫中動態(tài)輸入內(nèi)容進(jìn)行處理，這可能會非常有用。

#results:empty { background-color: #fcc; }

您可以使用該偽類來讓用戶注意搜索無結(jié)果的情況。

3. 目標(biāo)偽類

:target

這是我最喜歡的偽類之一，因?yàn)樗刮覀兛梢曰?URL 對頁面元素定義樣式。如果 URL 有一個(gè)標(biāo)識符（即帶有一個(gè) # 符號），那么 :target 偽類將為以該標(biāo)識符為 id 屬性的元素設(shè)置樣式。比如以下的鏈接：

http://www.mangguo.org/how-to-use-css3-pseudo-classes#summary

id 屬性為 summary 的區(qū)塊現(xiàn)在可以這樣設(shè)置樣式：

:target { background-color: #fcc; }

對于已經(jīng)被元素外部鏈接指向的頁面元素來說，這是一個(gè)偉大的舉措。你也可以使用它來高亮加了錨點(diǎn)的內(nèi)容。

或許，最令人印象深刻的 :target 使用案例是 Corey Mwamba 的綠色滾動網(wǎng)站。他使用了一些富有創(chuàng)意的 CSS3 和 :target 偽類來創(chuàng)建動態(tài)的 Tab 導(dǎo)航效果。Demo 稿中包含了一些 CSS3 的巧妙用法，說明了偽類如何和其他 CSS 選擇器結(jié)合使用。

Corey Mwamba 的綠色滾動網(wǎng)站

另外還有一個(gè)有趣的例子 Web Designer Notebook。利用了 :target 和 Webkit 動畫來高亮目標(biāo) div 中的大塊文本。Chris Coyier 還創(chuàng)建了一個(gè)基于 :target 偽類的 Tab 系統(tǒng)，發(fā)布在 CSS-Tricks 站點(diǎn)上。

iPhone 表單案例

這如我的 Demo 那樣，我在頂部添加了一個(gè)導(dǎo)航欄，用于錨點(diǎn)定位到不同的表單區(qū)域。我們可以高亮任何區(qū)塊：

:target { background-color: rgba(255,255,255,0.3);-webkit-border-radius: 10px;}

4. UI 元素狀態(tài)偽類

:enabled 和 :disabled

UI 元素偽類包括 :checked，:enabled，:disabled 三個(gè)。可以允許根據(jù)元素狀態(tài)來設(shè)定樣式（通常是表單元素）。狀態(tài)可以由用戶設(shè)置（:checked）或由開發(fā)者設(shè)置（:enabled 和:disabled）。例如，我們可以使用下列內(nèi)容：

input:enabled { background-color: #dfd; }input:disabled { background-color: #fdd; }

這將更有利于給予用戶反饋，讓他們知道可以可以填寫、什么不能填寫，你會經(jīng)常看到這樣的依賴 JavaScript 的動態(tài)特征。

iPhone 表單案例

為了實(shí)踐說明 :disabled，我已經(jīng)禁用表單的“提交”按鈕，并加入這行 CSS：

:disabled { color: #600; }

按鈕文字變紅了！

:checked

第三個(gè)偽類是 :checked，用于處理元素的狀態(tài)，如復(fù)選框或單選按鈕。這對用戶來說能給予非常有益的反饋，告訴他們選中了哪些。例如：

input[type=radio]:checked { font-weight: bold; }

iPhone 表單案例

當(dāng)按鈕按下時(shí)，我們可以用 CSS 來突出顯示每個(gè)按鈕旁邊的文本：

input:checked + label { text-shadow: 0 0 6px #fff; }

我們首先選擇任意已選中的 input 元素，然后查找包含目標(biāo)文本的臨近 <span> 元素，并使用簡單的 text-shadow 屬性來裝飾。

5. 否定偽類

:not

這是我最喜歡的另一種選擇器，因?yàn)樗鼤x中除了指定元素之外的全部元素。例如：

:not(footer) { … }

這將選中頁面上除了 footer 標(biāo)簽之外的任何元素，在網(wǎng)頁上是不是一個(gè)頁腳元素的一切。用于表單輸入框時(shí)，可以實(shí)現(xiàn)單個(gè)輸入框的突出顯示。

input:not([type=submit]) { … } input:not(disabled) { … }

第一行選擇除了 type 類型為 submit 的所有 input 元素。第二個(gè)選擇所有不是 disabled 狀態(tài)的 input 元素。

iPhone 表單案例

你已經(jīng)切切實(shí)實(shí)看了 :not 選擇器的作用。當(dāng)與其他 CSS3 偽類混用時(shí)，他將變得更加強(qiáng)大。讓我們來仔細(xì)看個(gè)例子：

fieldset input:not([type=radio]) { margin: 0; width: 290px; font-size: 18px; border-radius: 0; border-bottom: 0; border-color: #999; padding: 8px 10px;}

在這里，我們選擇字段元素內(nèi)不是單選按鈕的 input 輸入框。這在表單中是很常見的，因?yàn)槲谋据斎肟颉⑾吕x擇框、單選按鈕、提交按鈕往往是風(fēng)格不一的。點(diǎn)此查看最終的表單效果

6. 舊瓶裝新酒

讓我們回到文章開頭的 a:link。 HTML5 為 <a> 元素帶來了令人興奮的變化，賦予 CSS3 偽類更多的功能。

<a> 元素現(xiàn)在可以嵌套塊級元素，使整塊的頁面區(qū)塊成為鏈接（只要這些部分不包含其他交互元素）。之前需要通過 JavaScript 來實(shí)現(xiàn)的，現(xiàn)在可以使用 <a> 嵌套方案輕松實(shí)現(xiàn)了。例如：

123

CSS 偽類的含義是，你可以隨意為一個(gè) <div> 設(shè)定樣式，無論它是被懸停（a:hover）活著被激活（a:active），像這樣：

a:hover #advert { background-color: #f7f7f7; }

減少對 JavaScript 代碼的以來，并能適當(dāng)增強(qiáng)代碼語義總歸是件好事。

7. 跨瀏覽器兼容性

你肯定會問，IE8（或更早）不支持任何形式的 CSS3 選擇器，即使最新的 Chrome、Opera、Safari 和 Firefox 都支持良好。在你的血液沸騰前，請考慮以下解決方案。

Internet Explorer 9

你可能對微軟這款最新的 IE9 瀏覽器并不非常知情。但事實(shí)上它相當(dāng)不錯。雖然我并不指望讀者和我想法一致，值得記住的是，IE 是世界上最為廣泛流行的瀏覽器，和 Windows Update 和微軟全球性的營銷活動下，希望在不久的將來可以看到 IE9 成為主流。這對于網(wǎng)頁設(shè)計(jì)者是好事，對偽類選擇器也是好事。但是 IE8 和他的祖先們怎么辦？

Internet Explorer 9 來了

讓我們的老朋友 JavaScript 來救援 CSS3 偽類吧。我特別喜歡 Keith Clark 的 Selectivizr。Keith 組建了一個(gè)適用于各種 JavaScript 類庫的腳本，為早期版本的 IE 瀏覽器增加了 CSS3 偽類選擇器功能。但是要注意，各種類庫支持并不完全一致：如果你在 Mootools 上使用 Selectivizr，那么所有的偽類將可用，但如果你使用 jQuery，只有部分偽類可以正常工作。

Selectivizr

Keith recently 發(fā)布了一個(gè) jQuery 插件來支持以下 CSS3 偽類：

• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type
• :nth-last-of-type

另外，也值得關(guān)注下 Dean Edwards 寫的 ie7.js 腳本。這份腳本解決了一些 IE 相關(guān)問題，包括 CSS3 偽類。

因此，我們可以開始使用 CSS3 偽類了嗎？

我想就這個(gè)問題的答案取決于你如何看待 JavaScript 這玩意兒。現(xiàn)實(shí)是偽類完全可以被 class 和 id 替代。另一個(gè)現(xiàn)實(shí)是，在設(shè)置復(fù)雜布局樣式時(shí)，偽類非常有用并且理所而然、自然而然。如果你發(fā)現(xiàn)偽類提高了你的 CSS 可讀性，并減少了 HTML 中的非語義 CSS 類，這也正式我建議擁抱 CSS3 偽類的原因。

你可以使用兩個(gè)選擇器和一個(gè) class 名，但只是重復(fù)工作。這也意味著使用偽類并不是必須。如果你沒有堅(jiān)持原則，代碼可能看起來像這樣：

li:nth-of-type(3), li.third { … }

這種方法并不像使用偽類靈活，因?yàn)樵趦?nèi)容變化時(shí)你需要同事改變 HTML 結(jié)構(gòu)和 CSS 內(nèi)容。

如果用戶沒有啟用 JavaScript 會導(dǎo)致你陷入困境。許多網(wǎng)頁設(shè)計(jì)師認(rèn)為，功能（即 JavaScript）是和布局（即 CSS）不同的，所以你不應(yīng)該依賴于 JavaScript 使 IE8 和早期瀏覽器支持偽類。

雖然我原則上統(tǒng)一，實(shí)際上我認(rèn)為，相對于 99% 的用戶提供最佳的經(jīng)驗(yàn)和為剩余的 1％ 用戶做出讓步，顯然前者更好（假如你有大量無腳本的用戶，那就另當(dāng)別論）。

按照你的網(wǎng)站分析，并準(zhǔn)備成為一個(gè)網(wǎng)頁設(shè)計(jì)師不斷提高自己的技能。更重要的是，盡力為廣大用戶提供最好的體驗(yàn)。

8. 最后的思考

IE8 對偽類支持的缺乏，很難不讓人感到沮喪。可以說，瀏覽器以 JavaScript 方式計(jì)算和重新計(jì)算頁面樣式將對渲染速度造成影響，但因?yàn)樗衅渌饕獮g覽器現(xiàn)在支持這些選擇器。令人沮喪的是，如果沒有 JavaScript Hack 方案，我們的大多數(shù)用戶無法從中受益。

但就像 Farnsworth 說的，Internet Explorer 9 的曙光將是一道分水嶺，微軟已確保其新的瀏覽器支持每個(gè)本文所討論的選擇器。

CSS3 偽類選擇器不會大塊占用你的樣式表。他們是特有而充滿活力的。而且更可能的是，至少在最初階段，要補(bǔ)充性地優(yōu)化，而不是實(shí)現(xiàn)一個(gè)整體的網(wǎng)頁。也許你想丟棄列表最后一項(xiàng)的下邊框，或向用戶提供視覺反饋，因?yàn)樗麄冊谔顚懕砀瘛SS3 讓這些都成為可能，并且會逐漸成為主流，我希望這將成為 Web 設(shè)計(jì)工具箱的一部分。

9. 相關(guān)參考

英文原稿：How To Use CSS3 Pseudo-Classes | Smashing Magazine

翻譯整理：如何使用 CSS3 偽類 | 芒果小站

CSS3 :nth-child()偽類選擇器：http://www.cnblogs.com/kiracn/archive/2009/12/17/1626742.html

本文固定鏈接: http://lzw.me/a/css3-pseudo-classes.html | 志文工作室

該日志由 任俠 于2013年05月31日發(fā)表在 前端開發(fā), 網(wǎng)站建設(shè) 分類下，你可以發(fā)表評論，并在保留原文地址及作者的情況下引用到你的網(wǎng)站或博客。
原創(chuàng)文章轉(zhuǎn)載請注明: CSS 偽類選擇器：如何使用 CSS3 偽類 | 志文工作室
關(guān)鍵字: css, css3, 偽類

總結(jié)

以上是生活随笔為你收集整理的CSS 伪类选择器：如何使用 CSS3 伪类的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。