感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

虛擬類別

CSS Podcast - 015：匿名課程

假設您收到了電子郵件註冊表單如果電子郵件表單欄位中包含無效的電子郵件地址，則希望以紅色邊框顯示。該怎麼做呢？您可以使用 :invalid CSS 虛擬類別也是許多瀏覽器提供的虛擬類別之一

虛擬類別可讓您根據狀態變更和外部因素套用樣式。這表示您的設計能回應使用者輸入的內容 (例如無效的電子郵件地址)。相關內容會在選取器單元中詳細說明本單元將詳細說明

與虛擬元素不同詳情請參閱先前的單元虛擬類別會掛接到元素可能所屬的特定狀態，而不是設定該元素一般的樣式

互動狀態

以下虛擬類別是根據使用者與專頁之間的互動所導致。

`:hover`

瀏覽器支援

如果使用者擁有滑鼠或觸控板等指標裝置然後疊加在元素上則可使用 :hover 可套用樣式。這很適合用來提示元素可進行互動。

`:active`

瀏覽器支援

這個狀態會在使用者與元素互動時觸發：點擊等轉換。如果使用滑鼠等指標裝置表示點擊開始但尚未釋放。

`:focus`、`:focus-within`和`:focus-visible`

瀏覽器支援

如果元素可接收焦點 (例如 <button>)，回應使用者狀態 :focus 虛擬類別。

如果元素的子項元素獲得焦點 :focus-within。

可選擇的元素，例如按鈕當焦點位於焦點時，這些圓圈仍會顯示對焦環，即使他們按下了也沒關係。這類情況下，開發人員會套用下列 CSS：

button:focus {
    outline: none;
}

這個 CSS 會在元素獲得焦點時，移除預設的瀏覽器焦點環。這會導致使用者使用鍵盤瀏覽網頁時，會發生無障礙功能方面的問題。如果沒有對焦樣式只要使用 Tab 鍵，他們就無法追蹤目前的焦點通話對象：:focus-visible 等元素透過鍵盤獲得焦點時，即可顯示焦點樣式。，同時使用 outline: none 規則防止指標裝置與其互動。

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

`:target`

瀏覽器支援

:target 虛擬類別會選取 id 與網址片段相符的元素。假設您擁有以下 HTML：

<article id="content">
    …
</article>

當網址包含 #content 時，您可以為該元素附加樣式。

#content:target {
    background: yellow;
}

這很適合用來標示可能特別連結的區域或是網站上的主要內容

歷史州別

`:link`

瀏覽器支援

:link 虛擬類別可套用至任何具有 href 值尚未造訪的 <a> 元素。

`:visited`

您可使用 :visited 虛擬類別。這個狀態與 :link 相反，但可用的 CSS 屬性較少安全性因素。您只能設定 color、background-color 和 border-color、outline-color 和 SVG fill 和 stroke 的顏色。

訂單案件

如要定義 :visited 樣式，也可被明確性相同的連結虛擬類別覆寫。因此我們建議您使用 LVHA 規則，以特定順序為含有虛擬類別的連結設定樣式： :link、:visited、:hover、:active。

a:link {}
a:visited {}
a:hover {}
a:active {}

敬上

注意： 基於安全考量，您只能使用 :visited 虛擬類別變更 :link 或未造訪狀態定義的樣式，因此請務必先定義可變更的樣式。請依循 LVHA 規則，即可解決問題。

表單狀態

下列虛擬類別可以選取表單元素會在與元素互動時可能處於各種狀態的狀態。

`:disabled`和`:enabled`

瀏覽器支援

如果是表單元素例如瀏覽器停用 <button> 則可使用 :disabled 虛擬類別。 :enabled 虛擬類別適用於相反狀態但表單元素預設為 :enabled 因此，您不一定來到這裡學習這個虛擬類別。

`:checked`和`:indeterminate`

瀏覽器支援

:checked 虛擬類別適用於支援表單元素例如核取方塊或圓形按鈕等項目處於勾選狀態

:checked 狀態是二進位(true 或 false) 狀態。但是，在未勾選或未勾選的情況下，核取方塊是介於之間。也就是 :indeterminate 狀態。

當系統顯示「全選」這個控制項，可以勾選群組中的所有核取方塊。如果使用者之後取消勾選這些核取方塊根核取方塊不再代表「all」正在檢查的項目都應設為「不確定」狀態

<progress> 元素也具有未定狀態，可調整樣式。常見的用途是提供條紋外觀，表示不太需要多少心力。

`:placeholder-shown`

瀏覽器支援

如果表單欄位含有 placeholder 屬性且沒有值， :placeholder-shown 虛擬類別可用來將樣式附加至該狀態。一旦該領域有內容無論是否有 placeholder 這個狀態就不再適用

驗證狀態

瀏覽器支援

您可以使用虛擬類別回應 HTML 表單驗證，例如： :valid、 :invalid和 :in-range。 :valid 和 :invalid 虛擬類別適用於結構定義例如含有必須比對的 pattern 的電子郵件欄位才是有效欄位使用者可以向使用者顯示這個有效的值狀態以便他們瞭解他們可以安全地帶領公司前往下一個領域

如果輸入內容包含 min 和 max，就可以使用 :in-range 虛擬類別。例如數值輸入，「而且」值也會在這些範圍內。

使用 HTML 表單您可以使用 required 屬性判斷該欄位是否為必要欄位。 :required 虛擬類別即為必填欄位。您可以使用 :optional 虛擬類別。

按照索引、順序和出現次數選擇元素

一組虛擬類別會根據項目在文件中的位置選取項目。

`:first-child`和`:last-child`

瀏覽器支援

如要查看第一個或最後一個項目，您可以運用 :first-child 和 :last-child。這些虛擬類別會傳回一組同層元素的第一個或最後一個元素。

`:only-child`

瀏覽器支援

您也可以選取沒有同層級的元素使用 :only-child 虛擬類別。

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

瀏覽器支援

您可以選取 :first-of-type 和 :last-of-type 看起來和 :first-child 和 :last-child 相同，但請考慮以下 HTML：

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

此 CSS：

.my-parent div:first-child {
    color: red;
}

由於第一個子項是段落而非 div，因此元素不會顯示紅色元素。 :first-of-type 虛擬類別在這方面相當實用。

.my-parent div:first-of-type {
    color: red;
}

雖然第一個 <div> 是第二個子項，仍是 .my-parent 元素中的第一個類型因此，這項規則會顯示為紅色。

`:nth-child`和`:nth-of-type`

瀏覽器支援

您不需要只設定第一個和最後一個子子項及類型。 :nth-child 和 :nth-of-type。虛擬類別可讓您指定位於特定索引的元素。 CSS 選取器中的索引從 1 開始。

您也可以傳遞多個索引到這些虛擬類別。如要選取所有偶數元素，可以使用 :nth-child(even)。

您還可以建立更複雜的選取器，定期間隔間隔尋找項目。使用 An+B 微語法。

li:nth-child(3n+3) {
    background: yellow;
}

這個選取器會選取第三個項目從項目 3 開始此運算式中的 n 是索引。始於 3 (3n)，就是該指數乘以多少。

假設您有 7 個 <li> 個項目，因為 3n+3 會轉譯為 (3 * 0) + 3，所以所選項目的第一個是 3。下一個疊代作業會挑選項目 6，因為 n 已遞增為 1。例如 (3 * 1) + 3)。這個運算式適用於 :nth-child 和 :nth-of-type。

你可以使用這種選擇器數量選取器工具。

`:only-of-type`

瀏覽器支援

最後，您可以在一組類似的同層中，找到特定類型的唯一元素 :only-of-type。如果想要選取只包含一個項目的清單，這個選項就很實用或是想找出段落中唯一的粗體元素

尋找空白元素

有時您可以找出完全空白的元素這也有一些虛擬類別

`:empty`

瀏覽器支援

如果元素不含任何子項， :empty 虛擬類別適用於這些類別。不過，子項不只 HTML 元素或文字節點，也可以是空白字元、當您為下列 HTML 進行偵錯，但不知道為何無法與 :empty 搭配使用時，這可能會令人困惑：

<div>
</div>

這是因為開頭和結尾的 <div> 之間留有空白字元。這樣內容就沒有問題

如果您對 HTML 的控制權有限，並想隱藏空白元素，:empty 虛擬類別就十分有用。例如 WYSIWYG 的內容編輯器編輯器中，編輯者新增了空白段落。

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

您可以使用 :empty 找出並隱藏該訊息。

.post :empty {
    display: none;
}

找出並排除多個元素

部分虛擬類別可協助您編寫更精簡的 CSS。

`:is()`

瀏覽器支援

如要找出 .post 元素中的所有 h2、li 和 img 子元素，建議撰寫一個選擇器清單，如下所示：

.post h2,
.post li,
.post img {
    …
}

使用:is() 虛擬類別，可編寫更精簡的版本：

.post :is(h2, li, img) {
    …
}

:is 虛擬類別不僅程式碼比選取器清單更簡潔，也更有保障。大多數情況下如果選取器清單出現錯誤或不支援的選取器，整個選取器清單都會失效如果 :is 虛擬類別中傳遞的選取器發生錯誤，系統就會忽略無效的選擇器，但會使用有效的選擇器。

`:not()`

瀏覽器支援

您也可以使用 :not() 虛擬類別。舉例來說，您可以使用該屬性設定所有不含 class 屬性的連結樣式。

a:not([class]) {
    color: blue;
}

:not 虛擬類別也有助於改善無障礙功能。舉例來說，即使 <img> 為空白值，也必須具備 alt。因此可以編寫 CSS 規則，為無效圖片加上粗紅色外框：

img:not([alt]) {
    outline: 10px red;
}

隨堂測驗

測試自己的虛擬課程相關知識

虛擬類別就像是動態套用至元素的類別，虛擬元素本身則對元素本身採取行動。

是

留意使用單一或雙 : 做為選取器中的鍵區分字元

否

虛擬元素用於零件，虛擬類別則用於州。

以下何者為「功能」虛擬類別？

:is()

🎉

:target

函式虛擬類別後方的 () 代表接受參數。

:empty

函式虛擬類別後方的 () 代表接受參數。

:not()

🎉

下列何者是因使用者互動而完成的虛擬類別？

:hover

🎉

:press

請再試一次！

:squeeze

請再試一次！

:target

🎉

:focus-within

🎉

以下何者是 <form> 狀態虛擬類別？

:enabled

🎉

:fresh

請再試一次！

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

請再試一次！

:valid

🎉

除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。

上次更新時間：2021-04-28 (世界標準時間)。

web.dev
- web.dev
  
  我們希望能協助您打造美觀、容易存取、快速又安全的網站，希望您和所有使用者都能跨瀏覽器使用。本網站是 Chrome 團隊成員和外部專家撰寫的介紹內容，希望能協助您展開旅程。
提供相片
- 提報錯誤
- 查看已知問題
相關內容
追蹤