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

Posted 2023-03-06

【中文标题】CSS [attribute="value"] 选择器是不是不必要？ [复制]

【英文标题】：Is the CSS [attribute="value"] Selector unnecessary? [duplicate]CSS [attribute="value"] 选择器是否不必要？ [复制]

【发布时间】：2019-07-08 21:09:03

【问题描述】：

我正在学习一门关于 CSS 的 edX 课程，其中包括：

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

在 CSS 样式表中。不熟悉那种类型的属性，所以我查了一下。本质上，它只是使用特定的类 [（或 id），取决于特定的属性] 为任何东西添加样式。为什么不直接添加：

background-color: orange;

到相应的class，或者id，就可以了？我缺少的这种类型的属性是否有重要用途？

【问题讨论】：

属性不仅仅是id 和class。我在input[type="text"] 的上下文中看到它最常用来选择特定类型的输入

如果您不确定是否需要它，您可能不需要。每当您不必使用这些所谓的正则表达式选择器时，请避免使用它们。它们在渲染方面非常昂贵。

@TylerH 这不是重复的。您链接的问题是询问是否有可能，我的问题是询问选择器的有用性。两个完全不同的问题。此外，我早就接受了一个非常彻底的答案。

@elbrant 上面链接的目标问题中的答案也回答了这个问题，这就是重复功能的用途。你在这里接受了答案是完全无关紧要的。

【参考方案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 中的其他属性选择器包括：

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

| 选择器：此选择器检索其目标属性的值恰好是查询值或以查询值开头紧跟连字符的所有元素。

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

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

---

检查并运行以下代码片段，以获取实际示例并在代码 cmets 中解释上述每个选择器的工作原理：

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

【讨论】：

~= 的描述不正确。选择器只能指定一个单词，但它匹配其目标属性（当解释为空格分隔的单词列表时）包含该单词的每个元素。例如，<div title="foo bar baz"> 与 div[title~="baz"] 匹配。另一方面，[foo~="a b"] 永远不会匹配：没有单个单词会等于“a b”（因为单个单词不包含空格）。