CSS属性值选择器

CSS中有许多选择器，其中属性值选择器是一种非常有用的选择器。它可以根据元素属性的值来选择元素。

属性值选择器使用方括号表示，包含要匹配的属性和对应属性的值。可以使用不同的匹配方式来匹配属性值。

语法

属性值选择器的语法如下所示：

[attribute^=value]
[attribute$=value]
[attribute*=value]

其中：

• ^= 表示选择属性值以 value 开头的元素，即匹配属性值前缀为 value 的元素。
• $= 表示选择属性值以 value 结尾的元素，即匹配属性值后缀为 value 的元素。
• *= 表示选择属性值包含 value 的元素，即匹配属性值中包含 value 的元素。

示例

假设有以下HTML代码片段：

<ul>
  <li class="item">Apple</li>
  <li class="item" data-category="fruit">Banana</li>
  <li class="item">Cherry</li>
  <li class="item" data-category="fruit">Durian</li>
</ul>

我们可以使用属性值选择器来匹配某些元素：

/* 匹配class属性值以 "item" 开头的元素 */
.item[class^="item"] {
  color: red;
}

/* 匹配data-category属性值为 "fruit" 的元素 */
.item[data-category="fruit"] {
  background-color: yellow;
}

/* 匹配data-category属性值包含 "rui" 的元素 */
.item[data-category*="rui"] {
  text-decoration: underline;
}

上述代码将选择所有 class 属性以 item 开头的元素，并将它们的文本颜色设置为红色。此外，它还会选择所有 data-category 属性值为 fruit 的元素，并将它们的背景颜色设置为黄色。最后，它还会选择所有 data-category 属性值包含 rui 的元素，并将它们的文本下划线。

总结

属性值选择器是CSS提供的非常有用的选择器之一，可以根据元素属性的值来选择元素。通过不同的匹配方式，我们可以找到具有特定属性值的元素并改变它们的样式。