CSS | [属性*=值] 选择器

CSS中的属性选择器允许我们选择具有特定属性值的元素。其中一种属性选择器是[属性*=值]选择器，它匹配具有属性中包含特定值的元素。

语法

[属性*=值]

• 属性：要匹配的属性名。
• 值：要匹配的值。可以是任何字符串，大小写敏感。

例子

假设我们有一个HTML文档：

<ul>
  <li data-fruit="apple">Apple</li>
  <li data-fruit="banana">Banana</li>
  <li data-fruit="cherry">Cherry</li>
  <li data-fruit="watermelon">Watermelon</li>
</ul>

要选择所有data-fruit属性值包含字符串"an"的元素，可以使用以下CSS规则：

li[data-fruit*="an"] {
  color: red;
}

此规则将选择具有data-fruit属性的所有li元素，并将它们的文本颜色设置为红色。其中包含"an"的属性值是"banana"和"watermelon"。

注意事项

• 这种选择器非常灵活，可以用于匹配许多不同类型的元素。
• 这种选择器不是最具体的选择器，因此应该尽可能避免使用它来避免误匹配。
• 值可以是任何字符串，大小写敏感。如果要不区分大小写，则可以使用[属性*="值" i]，其中的i表示不区分大小写。