:state()

語法

:state(<custom identifier>) {
  /* ... */
}

引數

:state() 偽類接受一個自定義識別符號作為其引數，該識別符號表示要匹配的自定義元素的狀態。

描述

元素可以由於使用者互動和其他因素而在狀態之間轉換。例如，當用戶將滑鼠懸停在元素上時，元素可以處於“hover”狀態；或者當用戶單擊連結後，連結可以處於“visited”狀態。瀏覽器提供的元素可以使用 :hover 和 :visited 等 CSS 偽類根據這些狀態進行樣式設定。類似地，自治自定義元素（不是從內建元素派生的自定義元素）可以公開其狀態，從而允許使用這些元素的頁面使用 CSS :state() 偽類對其進行樣式設定。

自定義元素的狀態由字串值表示。這些值被新增或從與元素關聯的 CustomStateSet 物件中移除。當作為引數傳遞的識別符號存在於元素的 CustomStateSet 中時，CSS :state() 偽類會匹配該元素。

:state() 偽類還可以用於在自定義元素的實現中匹配自定義狀態。這是透過在 :host() 偽類函式中使用 :state() 來實現的，該函式僅在當前自定義元素的 Shadow DOM 中匹配狀態。

此外，::part() 偽元素後跟 :state() 偽類允許匹配處於特定狀態的自定義元素的 Shadow 部分。（Shadow 部分是自定義元素的 Shadow 樹中明確暴露給包含頁面以進行樣式設定的部分。）

示例

匹配自定義狀態

此 CSS 顯示當自治自定義元素 <labeled-checkbox> 處於“checked”狀態時，如何將其邊框更改為 red。

labeled-checkbox {
  border: dashed red;
}
labeled-checkbox:state(checked) {
  border: solid;
}

有關此程式碼的即時示例，請參閱 CustomStateSet 頁面上的匹配自定義複選框元素的自定義狀態示例。

在自定義元素的 Shadow DOM 中匹配自定義狀態

此示例顯示瞭如何在 :host() 偽類函式中使用 :state() 偽類來匹配自定義元素的實現中的自定義狀態。

當元素處於“checked”狀態時，以下 CSS 在元素之前注入一個灰色的 [x]。

:host(:state(checked))::before {
  content: "[x]";
}

有關此程式碼的即時示例，請參閱 CustomStateSet 頁面上的匹配自定義複選框元素的自定義狀態示例。

在 Shadow 部分中匹配自定義狀態

此示例顯示瞭如何使用 :state() 偽類來定位自定義元素的 Shadow 部分。

Shadow 部分使用 part 屬性定義和命名。例如，考慮一個名為 <question-box> 的自定義元素，它使用一個名為 checkbox 的 <labeled-checkbox> 自定義元素作為 Shadow 部分

shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;

下面的 CSS 顯示瞭如何使用 ::part() 偽元素來匹配 'checkbox' Shadow 部分。然後，它顯示瞭如何使用 ::part() 偽元素後跟 :state() 偽類來匹配處於 checked 狀態的同一部分。

question-box::part(checkbox) {
  color: red;
}

question-box::part(checkbox):state(checked) {
  color: green;
  outline: dashed 1px green;
}

有關此程式碼的即時示例，請參閱 CustomStateSet 頁面上的在自定義元素的 Shadow 部分中匹配自定義狀態示例。

規範

瀏覽器相容性

另見

• CustomStateSet
• 偽類
• 學習：偽類與偽元素
• 使用自定義元素中的自定義狀態和自定義狀態偽類 CSS 選擇器