(基于Alexis Goldstein, Louis Lazaris和Estelle Weyl的《HTML5 & CSS3 for the Real World》改編)

核心要點

CSS偽類用于定義元素的特殊狀態(tài)，包括結(jié)構(gòu)性、用戶操作、輸入和否定偽類等多種類型。它們可以根據(jù)元素在文檔樹中的位置、用戶交互、表單元素狀態(tài)或與特定選擇器不匹配的元素來設置元素樣式。

某些偽類可能存在安全問題，例如:visited偽類，攻擊者可以利用它檢查用戶的瀏覽歷史記錄?，F(xiàn)代瀏覽器限制了可應用于:visited的樣式以防止此問題。為提高可訪問性，建議在包含:hover的地方添加:focus，因為并非所有訪問者都使用鼠標瀏覽網(wǎng)站。

雖然大多數(shù)現(xiàn)代瀏覽器都支持所有CSS偽類，但某些舊版瀏覽器可能不支持某些偽類，例如:nth-child()和:nth-last-child()。像Selectivizr這樣的JavaScript庫可用于在Internet Explorer等缺乏支持的瀏覽器中定位這些偽類。

CSS偽類

您可能已經(jīng)熟悉一些用戶交互偽類，即:link、:visited、:hover、:active和:focus。

重要提示：關(guān)鍵要點

:visited偽類可能存在安全問題，因此瀏覽器不支持在已訪問鏈接上應用所有CSS屬性。如果沒有這些限制，惡意網(wǎng)站可以對已訪問鏈接應用樣式（例如，為每個已訪問鏈接應用唯一的背景圖像）來檢查用戶是否訪問過熱門網(wǎng)站或銀行。這允許攻擊者未經(jīng)許可查看用戶的瀏覽歷史記錄。因此，現(xiàn)代瀏覽器限制了可應用于:visited的樣式。規(guī)范明確允許這些更改，指出：用戶代理（UA）可以將所有鏈接視為未訪問鏈接，或?qū)嵤┢渌胧┮栽诔尸F(xiàn)已訪問和未訪問鏈接的不同方式的同時保護用戶的隱私。為提高可訪問性，請在包含:hover的地方添加:focus，因為并非所有訪問者都使用鼠標瀏覽您的網(wǎng)站。:hover可以應用于頁面上的任何元素，而不僅僅是鏈接和表單控件。:focus和:active與鏈接、表單控件、可編輯內(nèi)容元素以及任何具有tabindex屬性的元素相關(guān)。

雖然您可能已經(jīng)使用這些基本的偽類一段時間了，但還有許多其他可用的偽類。其中一些偽類已在規(guī)范中存在多年，但在瀏覽器開始支持使它們更相關(guān)的新的HTML5表單屬性之前，并未得到支持（或普遍了解）。以下偽類根據(jù)屬性、用戶交互和表單控件狀態(tài)匹配元素：

• :enabled：啟用的用戶界面元素，基本上是支持disabled屬性但當前未應用該屬性的任何表單控件。
• :disabled：相反，禁用的用戶界面元素：任何支持disabled屬性并當前已應用該屬性的表單控件。
• :checked：已選中或勾選的單選按鈕或復選框。
• :indeterminate：既未選中也未取消選中的表單元素。例如，如果您勾選“全選”復選框以選擇一組復選框，然后取消選擇該組中的一些但并非所有復選框，則可以將“全選”設置為不確定狀態(tài)（使用JavaScript）以指示它既未選中也未取消選中。
• :target：此選擇器選出當前活動頁面內(nèi)錨點的目標元素。這聽起來比實際情況復雜：您已經(jīng)知道，您可以通過在目標的ID之前使用#字符來創(chuàng)建指向頁面內(nèi)錨點的鏈接。例如，您的頁面中可能有一個“跳至內(nèi)容”鏈接，單擊該鏈接后，將跳轉(zhuǎn)到ID為“content”的元素。這會將地址欄中的URL更改為thispage.html#content，而:target選擇器現(xiàn)在匹配文檔中ID為“content”的元素。這就像您臨時包含了選擇器#content一樣。我們說“臨時”，是因為一旦用戶單擊不同的錨點，:target將匹配新的目標。
• :default：應用于在一組類似元素中為默認值的的一個或多個UI元素。例如，在頁面加載時已選中的一組同名單選按鈕中的一個單選按鈕，在同名組中的另一個單選按鈕被選中后，將繼續(xù)匹配:default。同樣，頁面加載時已選中的復選框在取消選中后將繼續(xù)匹配:default。
• :valid：根據(jù)類型、模式或其他輸入屬性（正如我們在第4章中討論的那樣）有效的元素。
• :invalid：空必需元素和無法滿足類型或模式屬性定義的要求的元素。
• :in-range：具有范圍限制且值在這些限制內(nèi)的元素。例如，這適用于具有min和max屬性的日期/時間、數(shù)字和范圍輸入類型。當值為null時，它是:in-range。
• :out-of-range：:in-range的反義詞：其值超出其范圍限制的元素。缺少的值不在范圍內(nèi)，因為它們是空的。
• :required：已設置:required屬性的表單控件。
• :optional：所有沒有:required屬性的表單控件。
• :read-only：用戶無法更改其內(nèi)容的元素。這大多數(shù)是除設置了contenteditable屬性的元素和表單字段以外的元素。
• :read-write：用戶可以更改其內(nèi)容的元素，例如contenteditable組件和可寫輸入字段。

在支持其表單控件中屬性的瀏覽器中，對這些屬性的瀏覽器支持是完整的；換句話說，支持required和pattern的瀏覽器也支持相關(guān)的:valid和:invalid偽類。IE8及更早版本不支持:checked、:enabled、:disabled和:target。好消息是IE9確實支持這些選擇器，但不支持用戶界面選擇器。IE10和IE11支持:indeterminate、:required和:optional，但不支持:default、:in-range、:out-of-range、:read-only或:read-write。雖然仍然缺乏支持，但像Selectivizr這樣的JavaScript庫可以幫助在Internet Explorer中定位這些偽類。

CSS偽類的常見問題解答 (FAQs)

(此處省略了FAQs部分，因為篇幅過長，且與偽原創(chuàng)目標不符。 可以根據(jù)需要選擇性地保留或改寫部分FAQs，并保持與原文意思一致。)

以上是偽級 - 基礎知識的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！