CSS [attribute ="value"]选择器是否不必要？

Question

我正在使用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>