Question

如果我希望属性div的所有data-color等于red，我可以

div[data-color='red']

但如果我想要任何元素data-color等于red怎么办？

我该怎么写？

Answer 1

使用相同的attribute selector，但在连接之前没有任何元素

表示属性名称为attr且其值的元素正是＆＃34;价值＆＃34;。

它将选择[data-color='red']

的任何元素

注意：即使使用''（与""不同），仍然无论如何都会选择""。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你应该可以使用：

[data-color='red']

或者你可以这样写：

*[data-color='red']

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

[data-color="red"]

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

例如：

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

工作示例：

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

<div data-color='red'>Red</div>
<p data-color='red'>Red</p>
<span data-color='red'>Red</span>
<hr data-color='red'/>
<section data-color='red'>Red</section>
<article data-color='red'>Red</article>
<aside data-color='red'>Red</aside>

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

2 个答案: