CSS [attribute =“value”]选择器是否不必要？ [重复]

Question

这个问题在这里已有答案：

• Select elements by data attribute in CSS 5个答案

我正在使用CSS上的一个edX类，它们包括：

[class*='example'] { background-color: orange; }

在CSS样式表中。不熟悉那种类型的属性，所以我查了一下。基本上它只是使用特定类[（或id），根据特定属性]添加样式。你为什么不添加：

background-color: orange;

到适当的类，或id，并完成它？我缺少这种属性的重要目的吗？

Answer 1

*中的[class*='example']是一个选择器，它检索类名中包含example的所有元素，而不仅仅是类名为example的元素。

所以[class*='example']将针对以下所有方面：

<div class="iamanexample"></div>
<div class="example"></div>
<div class="whereisyourexample"></div>

而.example或[class='example']将只针对上述三个中的第二个元素<div class="example"></div>。

---

CSS中的其他属性选择器包括：

~ selector：此选择器检索其目标属性值包含确切查询值的所有元素。此选择器可以包含以空格分隔的单词列表形式的多个值。

| selector：此选择器检索其目标属性值正好是查询值的所有元素，或者以查询后的值开头，后面跟一个连字符。

^ selector：此选择器检索其目标属性值以查询值开头的所有元素。

$ selector：此选择器检索其目标属性值以查询值结束的所有元素。

---

检查并运行以下代码片段，以获取有关上述每个选择器如何工作的代码注释中的实际示例和说明：

/* all elements whose abc value contains "ment" */
div[abc*="ment"] { font-weight: 700; }

/* all elements whose abc value is exactly "element-1" */
div[abc~="element-1"] { color: blue; }

/* all elements whose abc value is exactly "element" or begins with "element" immediately followed by a hyphen */
div[abc|="element"] { background-color: green; }

/* all elements whose abc value starts with "x" */
div[abc^="x"] { background-color: red; }

/* all elements whose abc value ends with "x" */
div[abc$="x"] { background-color: yellow; }

div { margin: 5px 0px; }

<div abc="element-1">Hello World!</div>
<div abc="element-2">Hello World!</div>

<div abc="xElement1">Hello World!</div>
<div abc="xElement2">Hello World!</div>

<div abc="element1x">Hello World!</div>
<div abc="element2x">Hello World!</div>