以数据属性为目标的 CSS 选择器

Question

我有以下 HTML 行：

<div data-component-id="12345" class="component" data-component-status="operational">

是否可以将data-component-id用作 CSS 选择器？

我想特别为这个 div 添加一个 CSS 代码，例如： {display: none}

Answer 1

您可以为此使用属性选择器[]

div[data-component-id="12345"] {
  background-color: red;
}

<div data-component-id="12345" class="component" data-component-status="operational">
  Demo
</div>