: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 选择器