CSS 属性选择器

在 CSS 中，属性选择器允许我们根据元素的属性值来选择元素。这种选择器非常灵活，可以帮助我们根据具体的属性值来样式化元素。

基本属性选择器

基本属性选择器使用方括号 [] 来指定属性和属性值。例如，我们可以使用以下方式选择所有带有 class 属性且属性值为 example 的元素：

[class="example"] {
  color: red;
}

这样就会将所有 class 属性值为 example 的元素的文字颜色设为红色。

子串值属性选择器

除了精确匹配属性值外，我们还可以使用子串值属性选择器来选择包含特定字符串的属性值。例如，我们可以使用以下方式选择所有 href 属性值包含 example.com 的链接：

[href*="example.com"] {
  text-decoration: underline;
}

这样就会给所有 href 属性值包含 example.com 的链接添加下划线。

开头匹配属性选择器

有时候我们只需要匹配属性值的开头部分。我们可以使用 ^ 符号来实现这一功能。例如，我们可以使用以下方式选择所有 src 属性值以 https 开头的图片：

[src^="https"] {
  border: 1px solid black;
}

这样就会给所有 src 属性值以 https 开头的图片添加黑色边框。

结尾匹配属性选择器

类似地，我们也可以使用 $ 符号来匹配属性值的结尾部分。例如，我们可以使用以下方式选择所有 href 属性值以 .pdf 结尾的链接：

[href$=".pdf"] {
  color: blue;
}

这样就会将所有 href 属性值以 .pdf 结尾的链接的文字颜色设为蓝色。

属性选择器是 CSS 中非常强大的一种选择器，可以帮助我们根据元素的属性值来选择元素并样式化。在实际开发中，灵活运用属性选择器可以让我们更加高效地编写样式。