:state()

:state() 伪类以自定义标识符作为参数，表示要匹配的自定义元素的状态。

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

元素可能会由于用户交互和其他因素而转换状态。例如，当用户将鼠标悬停在元素上时，该元素可能处于“悬停”状态，或者链接在用户点击后可能处于“已访问”状态。浏览器提供的元素可以使用 CSS 伪类（如 :hover 和 :visited）根据这些状态进行样式设置。类似地，自主自定义元素（未从内置元素派生的自定义元素）可以公开其状态，使使用这些元素的页面可以使用 CSS :state() 伪类对其进行样式设置。

自定义元素的状态由字符串值表示。这些值将被添加到或从与元素关联的 CustomStateSet 对象中。当作为参数传递的标识符存在于元素的 CustomStateSet 中时，CSS :state() 伪类将匹配该元素。

:state() 伪类还可用于匹配自定义元素实现中的自定义状态。这可以通过在 :host() 伪类函数中使用 :state() 来实现，该函数只匹配当前自定义元素的 Shadow DOM 中的状态。

此外，::part() 伪元素后跟 :state() 伪类，允许匹配处于特定状态的自定义元素的 Shadow 部件。（Shadow 部件是自定义元素的 Shadow 树中的部分，它们被明确公开给包含页面以供样式设置使用。）

此 CSS 显示了如何将自主自定义元素 <labeled-checkbox> 的边框更改为处于“选中”状态时的 red。

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

要查看此代码在实际中的示例，请访问匹配自定义复选框元素的自定义状态，该示例位于CustomStateSet页面上。

此示例演示了如何在:host()伪类函数内使用:state()伪类来匹配自定义元素实现中的自定义状态。

以下 CSS 在元素处于“checked”状态时，在其前面插入一个灰色的[x]。

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

要查看此代码在实际中的示例，请访问匹配自定义复选框元素的自定义状态，该示例位于CustomStateSet页面上。

此示例演示了如何使用:state()伪类来定位自定义元素的影子部分。

影子部分使用part属性进行定义和命名。例如，考虑一个名为<question-box>的自定义元素，它使用一个名为checkbox的影子部分，其中包含一个名为<labeled-checkbox>的自定义元素。

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

下面的 CSS 演示了如何使用::part()伪元素来匹配'checkbox'影子部分。然后演示了如何在元素处于checked状态时，如何使用::part()伪元素后跟:state()伪类来匹配同一个部分。

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

question-box::part(checkbox):state(checked) {
  color: green;
}

要查看此代码在实际中的示例，请访问匹配自定义元素的影子部分中的自定义状态，该示例位于CustomStateSet页面上。

• CustomStateSet
• 伪类
• 伪类和伪元素
• 自定义状态和自定义状态伪类 CSS 选择器，位于使用自定义元素中。