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

Question

I have the following HTML line:我有以下 HTML 行：

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

Is it possible to use the data-component-id as a CSS Selector?是否可以将data-component-id用作 CSS 选择器？

I would like to add a CSS code especially for this div, eg: {display: none}我想为这个 div 添加一个 CSS 代码，例如： {display: none}

Answer 1

You can use the Attribute selector [] for this您可以为此使用属性选择器[]

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

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