CSS 伪类选择器：如何使用 CSS3 伪类
CSS 偽類選擇器：如何使用 CSS3 偽類
CSS3 是個好東西，但也很容易被她的變形（transform）和動畫（其中許多特性因瀏覽器廠商而異）特性所迷惑，因而忘了那些已經被添加到標準規范中的最為基本的選擇器。許多強大的新偽類選擇器（最新的 W3C 規范中列出了 16 條）使得我們能夠在新的標準范圍內使用元素選擇器。
在探討這些新的 CSS3 偽類之前，先簡要回顧追溯一下這些在 Web 應用中常常被誤解的 CSS 選擇器。
1. 偽類簡史
在 1996 年，當 CSS1 的規范完成后，一些偽類選擇器已被囊括在內，其中許多你幾乎每天都在使用。例如：
- :link
- :visited
- :hover
- :active
這些狀態都可以被應用到某個元素，通常是以 “a:偽類名”的形式。令人難以置信的是，在 W3C 于 1997 年 12 月發布 HTML4 規范之前，這些偽類已經被極為廣泛地使用了。
1.1 CSS2 來了
于是 CSS2 來了。其建議規范在兩年之后的 1998 年 5 月發布。隨之令人興奮的是添加了 :first-child 和 :lang() 新偽類。
:lang
有許多種表示文檔語言類型的方法，如果你使用 HTML5，很可能會直接在 DOCTYPE 聲明之后放置 語句（指定本地語種）。當然，你也可以使用 :lang(en) 偽類來修飾頁面元素，對于語言動態變化的情況，這將非常有用。
:first-child
您可能已經在文檔中使用 :first-child 屬性。它通常用于添加或刪除列表中第一個元素的上邊框。奇怪的是，卻沒有 :last-child 這樣的偽類與之對應。于是不得等到 CSS3 規范的對這兩個兄弟偽類的支持。
1.2 為何使用偽類？
偽類如此實用的原因在于它們允許動態地設置內容樣式。比如上面的 <a> 例子，我們能夠描述當用戶與鏈接進行交互時，鏈接該如何呈現樣式。正如我們看到的，新的偽類允許我們根據元素在文檔中的位置或狀態，動態地設置其樣式。
16 個全新偽類已經成為 W3C 的 CSS 建議的一部分，它們被分成四組：結構偽類、UI 元素的狀態偽類、一個目標（target）偽類和一個否定偽類。
W3C 是 CSS 之家
現在我們一起探究看看如何使用這 16 個新偽類選擇器。我會使用和 W3C 相同的標識符來命名 CSS 類，比如 E 代表元素（element），n 表示數字（number），s 表示選擇器（selector）。
1.3 示例代碼
大部分新選擇器都會給出參考示例，以便直觀地看到代碼呈現效果。這里會涉及一張適用于 iPhone 并且使用了 CSS3 偽類的表單。
請注意，這張表單中大部分樣式可以使用 id 和類（class）選擇器設定。即便如此，仍然可以使用新偽類針為這個表單錦上添花。點擊這里查看頁面示例
<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. 結構偽類
根據 W3C 規范，結構偽類用來做下面的事：
…允許選擇位于文檔樹的額外信息，但不能用其他簡單的選擇器或組合選擇器代替。
這意味著我們擁有了能根據選擇器在文檔中的所處位置，動態選擇內容的選擇器。那么讓我們從文檔本身開始，即 :root 偽類。
W3C 上的 Level 3 選擇器
E:root
:root 偽類選擇頁面的根元素。十有八九根節點是 <html> 元素，例如：
:root { background-color: #fcfcfc; }除了給 <html> 元素設定樣式，這個偽類基本沒什么價值，可能也就描述性稍強些：
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() 選擇器可能需要一些實踐才能完全理解。最簡單的記憶方法是使用關鍵詞“奇數或偶數”（odd 或 even），因為在顯示由行列組成的數據表格時，這將非常有用。例如，我們可以使用下列內容：
ul li:nth-child(odd) { background-color: #666; color: #fff; }這將使無序列表中的每個奇數行高亮顯示。您可能會發現在表格中使用這種技術非常方便。例如：
table tr:nth-child(even) { … }:nth-child 選擇器更明確靈活，因此，你可以選擇列表的第三個元素，像這樣：
li:nth-child(3) { … }請注意 n 并不是從零開始，第一個元素是 :nth-child(1)，第二個是 :nth-child(2)，以此類推。
我們也可以利用一些簡單的代數，使它變得更加精彩。考慮以下代碼：
li:nth-child(2n) { … }當我們以這種方式使用 n，它代表對所有正整數，直到文檔耗盡可選擇的元素。在這種情況下，它會選擇下列列表項：
- 未選擇元素 (2 × 0)
- 第 2 個元素 (2 × 1)
- 第 4 個元素 (2 × 2)
- 第 6 個元素 (2 × 3)
- 第 8 個元素 (2 × 4)
- 等等…
這實際上和使用 :nth-child(even) 完全一致。因此我們混入點東西：
li:nth-child(5n) { … }對應選擇的節點元素：
- 未選擇元素 (5 × 0)
- 第 5 個元素 (5 × 1)
- 第 10 個元素 (5 × 2)
- 第 15 個元素 (5 × 3)
- 第 20 個元素 (5 × 4)
- 等等…
對于長列表或表格而言，也許這將很有用，也可能完全無用。我們還可以在這一公式中執行數字加減法：
li:nth-child(4n + 1) { … }對應選擇的節點元素：
- 第 1 個元素 ((4 × 0) + 1)
- 第 5 個元素 ((4 × 1) + 1)
- 第 9 個元素 ((4 × 2) + 1)
- 第 13 個元素 ((4 × 3) + 1)
- 第 17 個元素 ((4 × 4) + 1)
- 等等…
這里 SitePoint 指出了一個怪癖的功能，如果你將 n 設置為負值，則可以像這樣選擇前 x 項。
li:nth-child(-n + x) { … }如果你期望選擇前 5 項，可以這樣寫：
li:nth-child(-n + 5) { … }對應選擇的節點元素：
- 第 5 個元素 (-0 + 5)
- 第 4 個元素 (-1 + 5)
- 第 3 個元素 (-2 + 5)
- 第 2 個元素 (-3 + 5)
- 第 1 個元素 (-4 + 5)
- 未選擇元素 (-5 + 5)
- 未選擇元素 (-6 + 5)
- 等等…
如果你想要根據熱門程度來列數據條目，并予以突出顯示，也就是說，前十項可能是很有用的。
WebDesign & Such 創建了 斑馬樣式示例，這應該是一個 :nth-child 的最佳實踐。
使用 CSS3 設置表格的斑馬樣式
如果沒有需要設置樣式的表格，那么你可以 Webvisionary Awards 獎已經做的和使用：第n -孩子式交替其網站部分。這里的css：
如果你的表格都不需要設置樣式，那么你可以像 Webvisionary Awards 那樣，使用 :nth-child 設置網站區塊的交替樣式。CSS 代碼如下：
section > section:nth-child(even) { background:rgba(255,255,255,.1) url("../images/hr-damaged2.png") 0 bottom no-repeat; }其效果很細微，但它增加了一個陳舊瀏覽器不支持的細節。
Webvisionary Awards 上使用的 :nth-child 選擇器
iPhone 表單案例
繼續回到那張 iPhone 表單案例，這個案例中幾乎很少地方可以使用 :nth-child 偽類，但值得注意的一點是，我們期望對前三個字段集的 label 標簽隱藏，取而代之使用占位符（placeholder）文本替代。CSS 代碼如下：
form:nth-child(-n+3) label { display: none; }這里，我們尋找 <form> 元素的前三個子節點，然后選取 label 元素，可以使用 display:none; 來隱藏。
E:nth-last-child(n)
我們并不僅僅滿足于 :nth-child() 偽類，W3C 也給我們提供了 :nth-last-child(n) 偽類。它和 :nth-child() 的表現非常相似，除了反向操作，從最后一個向開始計算的功能。
li:nth-last-child(1) { … }上述將選擇列表中的最后一個元素，而下面將選擇倒數第二個元素：
li:nth-last-child(2) { … }當然，你也可以使用其他規則：
li:nth-last-child(2n+1) { … }但你可能更傾向于使用以下方法選擇最后五個列表元素（以上面討論的邏輯為基礎）：
li:nth-last-child(-n+5) { … }如果這仍然沒有太大的意義，Lea Verou 創造了一個有用的 CSS3 結構偽類選擇器測試工具，值得一試。
CSS3 結構偽類選擇器測試工具
iPhone 表單案例
在案例中，我們可以使用 :nth-last-child 來為“Card number”字段添加圓角。以下 CSS 代碼可能過于具體，但至少提供了一個關聯偽類的方法：
fieldset:nth-last-child(2) input:nth-last-of-type(3) { border-radius: 10px; }我們首先抓住倒數第二個字段，選擇其中倒數第三個字段（這個案例中，是“Card Number”字段）。然后，我們添加一個圓角效果（border-radius）。
:nth-of-type(n)
現在我們將做得更加具體，只為特定類型的元素設定樣式。例如，假設你想使得文章第一段具有較大的字體。CSS 代碼如下：
article p:nth-of-type(1) { font-size: 1.5em; }也許你要文章中的部分圖片右對齊，另一部分左對齊。則可以使用關鍵字來控制：
article img:nth-of-type(odd) { float: right; } article img:nth-of-type(even) { float: left; }通過 :nth-child() 和 :nth-last-child(), 你可以使用代數表達式：
article p:nth-of-type(2n+2) { … } article p:nth-of-type(-n+1) { … }值得記住的是如果需要獲得這些指定的目標元素，使用描述性的 CSS 類名可能更合理。
Simon Foster 創建了一個 關于 45 張 RPM 唱片集的漂亮圖表，并且使用 :nth-of-type 來為某些數據設置樣式。以下是他的代碼片段，CSS 中各流派類型都做了區分。
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); }網站上是這樣呈現的：
For the Record 中的 :nth-of-type 選擇器應用
iPhone 表單案例
比方說，我們希望偶數序號的輸入框元素有底部圓角。可以用 CSS 實現這一點：
input:nth-of-type(even) { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }該案例中，我們只期望應用到 “payment” 字段，因為個人信息含有三個文本輸入框。處理方法有些棘手，要確保不會選擇任何單選框。最終 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)
現在來看看 :nth-last-of-type() 從選定元素的末尾開始，并且倒序工作。
要選擇文章的最后一段，可以這樣使用：
article p:nth-last-of-type(1) { … }當文章不確定是否以段樓你可能會選擇這個選擇器來代替 :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 效果完全一樣，只不過從后續元素開始查找而已。
iPhone 表單案例
我們可以在這張表單中結合使用 :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 元素增加了圓角上邊框，并且所在字段不是單選按鈕。第二行對字段內的最后一個 input 元素增加圓角下邊框。
:only-of-type
還有另一個選擇器 :only-of-type()。用于選擇那些和它父元素中與自身同類型的元素。例如下面的代碼：
p { font-size: 18px; }以及：
p:only-of-type { font-size: 18px; }第一個選擇器將影響到頁面中的所有 p 元素，第二個選擇器只會影響它父親節點下的所有 p 元素。
如果數據庫查詢只返回一個結果數據，為這個內容設置樣式時，用 :only-of-type 可能會很方便。
Devsnippet 創建了一個 Demo，說明如何在多個圖片中為單個圖片定義樣式。
Devsnippet’s 的 :only-of-type 案例
iPhone 表單案例
這張表單中，我們可以確保所有輸入字段，無論在頂部還是底部，都有圓角效果，并且是該輸入字段的唯一子節點。CSS 代碼如下：
fieldset input:only-of-type { border-radius: 10px; }:last-child
這是一個奇怪的地方：:first-child 是 CSS2 的規范，但 :last-child 卻在 CSS3 中才出現。也不需要過多語言解釋，:last-child 用于選擇父元素下的最后一個子節點。例如：
li { border-bottom: 1px solid #ccc; }li:last-child { border-bottom: none; }這是一個從列表底部消除邊框的有用方法，在 WordPress 小工具中可以經常看到這種應用。
Rachel Andrew 在他的 Cleaner Code With CSS3 Selectors 文章里談論了 :last-child 和其他 CSS 偽類。他告訴我們如何使用這個偽類創建一份良好格式的圖片畫廊，而無需額外的 CSS 類。
Rachel Andrew 的 :last-child 偽類使用案例
:only-child
如果某個元素是它的父節點的唯一子節點，那么你可以使用 :only-child 選擇它。不像 :only-of-type 偽類，并且和元素類型無關。例如：
li:only-child { … }我們可以使用它來選擇 <ul> 或 <ol> 中的單個列表項。
:empty
最后，結構偽類中，我們還有一個 :empty。毫不奇怪，這個選擇器只會選擇那些沒有子節點和文本節點的元素。如果從數據庫中動態輸入內容進行處理，這可能會非常有用。
#results:empty { background-color: #fcc; }您可以使用該偽類來讓用戶注意搜索無結果的情況。
3. 目標偽類
:target
這是我最喜歡的偽類之一，因為它使我們可以基于 URL 對頁面元素定義樣式。如果 URL 有一個標識符（即帶有一個 # 符號），那么 :target 偽類將為以該標識符為 id 屬性的元素設置樣式。比如以下的鏈接：
http://www.mangguo.org/how-to-use-css3-pseudo-classes#summary
id 屬性為 summary 的區塊現在可以這樣設置樣式：
:target { background-color: #fcc; }對于已經被元素外部鏈接指向的頁面元素來說，這是一個偉大的舉措。你也可以使用它來高亮加了錨點的內容。
或許，最令人印象深刻的 :target 使用案例是 Corey Mwamba 的綠色滾動網站。他使用了一些富有創意的 CSS3 和 :target 偽類來創建動態的 Tab 導航效果。Demo 稿中包含了一些 CSS3 的巧妙用法，說明了偽類如何和其他 CSS 選擇器結合使用。
Corey Mwamba 的綠色滾動網站
另外還有一個有趣的例子 Web Designer Notebook。利用了 :target 和 Webkit 動畫來高亮目標 div 中的大塊文本。Chris Coyier 還創建了一個基于 :target 偽類的 Tab 系統，發布在 CSS-Tricks 站點上。
iPhone 表單案例
這如我的 Demo 那樣，我在頂部添加了一個導航欄，用于錨點定位到不同的表單區域。我們可以高亮任何區塊：
:target { background-color: rgba(255,255,255,0.3);-webkit-border-radius: 10px;}4. UI 元素狀態偽類
:enabled 和 :disabled
UI 元素偽類包括 :checked，:enabled，:disabled 三個。可以允許根據元素狀態來設定樣式（通常是表單元素）。狀態可以由用戶設置（:checked）或由開發者設置（:enabled 和:disabled）。例如，我們可以使用下列內容：
input:enabled { background-color: #dfd; }input:disabled { background-color: #fdd; }這將更有利于給予用戶反饋，讓他們知道可以可以填寫、什么不能填寫，你會經常看到這樣的依賴 JavaScript 的動態特征。
iPhone 表單案例
為了實踐說明 :disabled，我已經禁用表單的“提交”按鈕，并加入這行 CSS：
:disabled { color: #600; }按鈕文字變紅了！
:checked
第三個偽類是 :checked，用于處理元素的狀態，如復選框或單選按鈕。這對用戶來說能給予非常有益的反饋，告訴他們選中了哪些。例如：
input[type=radio]:checked { font-weight: bold; }iPhone 表單案例
當按鈕按下時，我們可以用 CSS 來突出顯示每個按鈕旁邊的文本：
input:checked + label { text-shadow: 0 0 6px #fff; }我們首先選擇任意已選中的 input 元素，然后查找包含目標文本的臨近 <span> 元素，并使用簡單的 text-shadow 屬性來裝飾。
5. 否定偽類
:not
這是我最喜歡的另一種選擇器，因為它會選中除了指定元素之外的全部元素。例如：
:not(footer) { … }這將選中頁面上除了 footer 標簽之外的任何元素，在網頁上是不是一個頁腳元素的一切。用于表單輸入框時，可以實現單個輸入框的突出顯示。
input:not([type=submit]) { … } input:not(disabled) { … }第一行選擇除了 type 類型為 submit 的所有 input 元素。第二個選擇所有不是 disabled 狀態的 input 元素。
iPhone 表單案例
你已經切切實實看了 :not 選擇器的作用。當與其他 CSS3 偽類混用時，他將變得更加強大。讓我們來仔細看個例子：
fieldset input:not([type=radio]) { margin: 0; width: 290px; font-size: 18px; border-radius: 0; border-bottom: 0; border-color: #999; padding: 8px 10px;}在這里，我們選擇字段元素內不是單選按鈕的 input 輸入框。這在表單中是很常見的，因為文本輸入框、下拉選擇框、單選按鈕、提交按鈕往往是風格不一的。點此查看最終的表單效果
6. 舊瓶裝新酒
讓我們回到文章開頭的 a:link。 HTML5 為 <a> 元素帶來了令人興奮的變化，賦予 CSS3 偽類更多的功能。
<a> 元素現在可以嵌套塊級元素，使整塊的頁面區塊成為鏈接（只要這些部分不包含其他交互元素）。之前需要通過 JavaScript 來實現的，現在可以使用 <a> 嵌套方案輕松實現了。例如：
123CSS 偽類的含義是，你可以隨意為一個 <div> 設定樣式，無論它是被懸停（a:hover）活著被激活（a:active），像這樣：
a:hover #advert { background-color: #f7f7f7; }減少對 JavaScript 代碼的以來，并能適當增強代碼語義總歸是件好事。
7. 跨瀏覽器兼容性
你肯定會問，IE8（或更早）不支持任何形式的 CSS3 選擇器，即使最新的 Chrome、Opera、Safari 和 Firefox 都支持良好。在你的血液沸騰前，請考慮以下解決方案。
Internet Explorer 9
你可能對微軟這款最新的 IE9 瀏覽器并不非常知情。但事實上它相當不錯。雖然我并不指望讀者和我想法一致，值得記住的是，IE 是世界上最為廣泛流行的瀏覽器，和 Windows Update 和微軟全球性的營銷活動下，希望在不久的將來可以看到 IE9 成為主流。這對于網頁設計者是好事，對偽類選擇器也是好事。但是 IE8 和他的祖先們怎么辦？
Internet Explorer 9 來了
讓我們的老朋友 JavaScript 來救援 CSS3 偽類吧。我特別喜歡 Keith Clark 的 Selectivizr。Keith 組建了一個適用于各種 JavaScript 類庫的腳本，為早期版本的 IE 瀏覽器增加了 CSS3 偽類選擇器功能。但是要注意，各種類庫支持并不完全一致：如果你在 Mootools 上使用 Selectivizr，那么所有的偽類將可用，但如果你使用 jQuery，只有部分偽類可以正常工作。
Selectivizr
Keith recently 發布了一個 jQuery 插件來支持以下 CSS3 偽類：
- :first-of-type
- :last-of-type
- :only-of-type
- :nth-of-type
- :nth-last-of-type
另外，也值得關注下 Dean Edwards 寫的 ie7.js 腳本。這份腳本解決了一些 IE 相關問題，包括 CSS3 偽類。
因此，我們可以開始使用 CSS3 偽類了嗎？
我想就這個問題的答案取決于你如何看待 JavaScript 這玩意兒。現實是偽類完全可以被 class 和 id 替代。另一個現實是，在設置復雜布局樣式時，偽類非常有用并且理所而然、自然而然。如果你發現偽類提高了你的 CSS 可讀性，并減少了 HTML 中的非語義 CSS 類，這也正式我建議擁抱 CSS3 偽類的原因。
你可以使用兩個選擇器和一個 class 名，但只是重復工作。這也意味著使用偽類并不是必須。如果你沒有堅持原則，代碼可能看起來像這樣：
li:nth-of-type(3), li.third { … }這種方法并不像使用偽類靈活，因為在內容變化時你需要同事改變 HTML 結構和 CSS 內容。
如果用戶沒有啟用 JavaScript 會導致你陷入困境。許多網頁設計師認為，功能（即 JavaScript）是和布局（即 CSS）不同的，所以你不應該依賴于 JavaScript 使 IE8 和早期瀏覽器支持偽類。
雖然我原則上統一，實際上我認為，相對于 99% 的用戶提供最佳的經驗和為剩余的 1％ 用戶做出讓步，顯然前者更好（假如你有大量無腳本的用戶，那就另當別論）。
按照你的網站分析，并準備成為一個網頁設計師不斷提高自己的技能。更重要的是，盡力為廣大用戶提供最好的體驗。
8. 最后的思考
IE8 對偽類支持的缺乏，很難不讓人感到沮喪。可以說，瀏覽器以 JavaScript 方式計算和重新計算頁面樣式將對渲染速度造成影響，但因為所有其他主要瀏覽器現在支持這些選擇器。令人沮喪的是，如果沒有 JavaScript Hack 方案，我們的大多數用戶無法從中受益。
但就像 Farnsworth 說的，Internet Explorer 9 的曙光將是一道分水嶺，微軟已確保其新的瀏覽器支持每個本文所討論的選擇器。
CSS3 偽類選擇器不會大塊占用你的樣式表。他們是特有而充滿活力的。而且更可能的是，至少在最初階段，要補充性地優化，而不是實現一個整體的網頁。也許你想丟棄列表最后一項的下邊框，或向用戶提供視覺反饋，因為他們在填寫表格。CSS3 讓這些都成為可能，并且會逐漸成為主流，我希望這將成為 Web 設計工具箱的一部分。
9. 相關參考
英文原稿：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日發表在 前端開發, 網站建設 分類下，你可以發表評論，并在保留原文地址及作者的情況下引用到你的網站或博客。原創文章轉載請注明: CSS 偽類選擇器：如何使用 CSS3 偽類 | 志文工作室
關鍵字: css, css3, 偽類
總結
以上是生活随笔為你收集整理的CSS 伪类选择器：如何使用 CSS3 伪类的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谷歌欲入局折叠屏手机市场 安卓“爸爸”能
- 下一篇： CSS中的position