偽級 - 基礎知識

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

核心要點

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

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

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

CSS偽類

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

重要提示：關鍵要點

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

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

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

在支持其表單控件中屬性的瀏覽器中，對這些屬性的瀏覽器支持是完整的；換句話說，支持required和pattern的瀏覽器也支持相關的: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部分，因為篇幅過長，且與偽原創目標不符。 可以根據需要選擇性地保留或改寫部分FAQs，並保持與原文意思一致。)

以上是偽級 - 基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！