虛擬類別

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

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

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

互動狀態

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

:hover

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:2.

資料來源

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

:active

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:1.

資料來源

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

:focus:focus-within:focus-visible

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:1.

資料來源

如果元素可接收焦點 (例如 <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

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:1.3.

資料來源

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

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

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

#content:target {
    background: yellow;
}

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

歷史州別

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:1.

資料來源

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

:visited

您可使用 :visited 虛擬類別。 這個狀態與 :link 相反,但可用的 CSS 屬性較少 安全性因素。 您只能設定 colorbackground-colorborder-coloroutline-color 和 SVG fillstroke 的顏色。

訂單案件

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

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

表單狀態

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

:disabled:enabled

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:3.1.

資料來源

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

:checked:indeterminate

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:3.1.

資料來源

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

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

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

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

:placeholder-shown

瀏覽器支援

  • Chrome:47.
  • Edge:79,
  • Firefox:51。
  • Safari:9.

資料來源

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

驗證狀態

瀏覽器支援

  • Chrome:10.
  • Edge:12.
  • Firefox:4.
  • Safari:5.

資料來源

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

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

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

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

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

:first-child:last-child

瀏覽器支援

  • Chrome:4.
  • Edge:12.
  • Firefox:3.
  • Safari:3.1.

資料來源

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

:only-child

瀏覽器支援

  • Chrome:2.
  • Edge:12.
  • Firefox:1.5。
  • Safari:3.1.

資料來源

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

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

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:3.5。
  • Safari:3.1.

資料來源

您可以選取 :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

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:3.5。
  • Safari:3.1.

資料來源

您不需要只設定第一個和最後一個子子項及類型。 :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

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:3.5。
  • Safari:3.1.

資料來源

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

尋找空白元素

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

:empty

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:3.1.

資料來源

如果元素不含任何子項, :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()

瀏覽器支援

  • Chrome:88。
  • Edge:88。
  • Firefox:78。
  • Safari:14.

資料來源

如要找出 .post 元素中的所有 h2liimg 子元素, 建議撰寫一個選擇器清單,如下所示:

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

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

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

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

:not()

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:1.
  • Safari:3.1.

資料來源

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

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

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

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

隨堂測驗

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

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

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

:empty
:target
:not()
:is()

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

:focus-within
:hover
:target
:press
:squeeze

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

:loading
:enabled
:valid
:checked
:fresh
:indeterminate
:in-range