简介

CSS [attribute~=value] 选择器用于匹配具有给定属性且该属性值包含指定值的元素。换句话说，它会选择具有指定属性并且该属性值的任何部分与给定值匹配的元素。

语法

[attribute~=value]

其中：

• attribute 是要匹配的属性的名称。
• value 是要匹配的属性值。

用法

[attribute~=value] 选择器对于匹配具有部分匹配属性值的元素非常有用。例如，要选择具有 class 属性且该属性值包含单词 "active" 的所有元素，可以使用以下选择器：

[class~=active]

此选择器将匹配以下元素：

<div class="active"></div>
<div class="active-item"></div>
<div class="not-active"></div>

因为 active 是 class 属性值的一部分，所以前两个元素与选择器匹配，而第三个元素不匹配。

与其他选择器的比较

[attribute<del>=value] 选择器类似于 [attribute*=value] 选择器，但它更宽松。[attribute*=value] 选择器要求属性值必须以给定值开头，而 [attribute</del>=value] 选择器允许属性值中的任何部分与给定值匹配。

以下示例说明了这两种选择器之间的区别：

<div class="active-item"></div>
<div class="item-active"></div>

[attribute*=value] 选择器将只匹配第一个元素，因为它的 class 属性值以 "active" 开头。[attribute~=value] 选择器将匹配两个元素，因为它们的 class 属性值都包含单词 "active"。

示例

以下是一些使用 [attribute~=value] 选择器的示例：

• 匹配具有 id 属性且该属性值包含 "header" 的所有元素：

[id~=header]

• 匹配具有 class 属性且该属性值包含 "btn" 的所有按钮元素：

button[class~=btn]

• 匹配具有 data-type 属性且该属性值包含 "user" 的所有元素：

[data-type~=user]

浏览器支持

[attribute~=value] 选择器在所有现代浏览器中都得到广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

结论

[attribute~=value] 选择器是一种强大的工具，可用于匹配具有部分匹配属性值的元素。它可以与其他选择器结合使用以创建更复杂和特定的选择器。