如何在css3中选择任何属性等于红色的元素？

Question

如果我想要所有div具有data-color相同属性的s red,我就能做到

div[data-color='red']

但是,如果我想要任何元素,那data-color等于red什么呢？

我该怎么写呢？

Answer 1

使用相同的属性选择器,但在连接之前没有任何元素

表示属性名称为attr且其值正好为"value"的元素.

它将选择任何元素 [data-color='red']

注意: 即使使用''(不同于""),它仍然会选择"".

[data-color='red'] {
  background: red;
  display: block
}

<div data-color='red'>red</div>
<p data-color='red'>red</p>
<article data-color='red'>red</article>
<section data-color='red'>red</section>
<h1 data-color='red'>red</h1>
<span data-color='red'>red</span>

<hr />

<div data-color="red">red</div>
<p data-color="red">red</p>
<article data-color="red">red</article>
<section data-color="red">red</section>
<h1 data-color="red">red</h1>
<span data-color="red">red</span>

如果要定位特定元素,可以将该元素放在属性选择器之前:

div[data-color='red'] {
  background: red;
}
p[data-color='red'] {
  color: red
}

<div data-color='red'>red</div>
<p data-color='red'>red</p>

Answer 2

您应该能够使用：

[data-color='red']

或者你可以这样写：

*[data-color='red']

您也可以用双引号编写它，这也会选择相同的内容，但值得在整个 CSS 文件中保持相同的格式以维护标准。在这种情况下，我建议坚持使用单引号。

[data-color="red"]

这将选择 data-color 属性值等于红色的任何 HTML 元素。

例如：

<div data-color='red'>Red</div>
<p data-color='red'>Red</p>
<span data-color='red'>Red</span>

工作示例：

[data-color='red']

*[data-color='red']