CSS 属性选择器

CSS 属性选择器，用于选择一组 HTML 元素，只要指定的属性满足指定的规则即可。CSS 属性选择器经常用于选择：

1. HTML 表单元素，例如 <input type="text">、<input type="submit"> 等，可以选择 type 属性值满足一定条件的元素。
2. 拥有自定义属性的 HTML 元素，例如 <div data-index="0">，选择 data-index 满足条件的元素。

CSS 属性选择器有多种条件匹配，例如存在匹配、精确匹配、前缀匹配和后缀匹配等，接下来我们分别看一下它们的用法和示例。

[attr]

[attr] 用于选择存在指定属性的 HTML 元素，无论属性值是什么，即存在匹配，[] 中的 attr 直接替换成要匹配的属性名即可，例如下方代码所示：

<style>
  [title] {
    color: hsl(214deg, 50%, 60%);
    font-family: sans-serif;
  }

  [disabled] {
    background: hsl(0deg, 0%, 80%);
  }
</style>

<a href="#" title="超链接">超链接</a>
<h1 title="一级标题">标题</h1>
<button disabled>按钮</button>

预览：

这里我们用 [title] 选择了属性包含 title 的 <a> 和 <h1> 标签，把它们的字体和颜色修改了一下，另外使用了 [disabled] 选择了含有 disabled 属性的按钮，并把它的背景色改成了灰色。可以看到无论属性是否有值，都可以选择该属性。

[attr=value]

[attr=value] 用于精确匹配属性值，把 value 改为要匹配的值即可，例如下方代码所示：

<style>
  [type="text"] {
    border: 1px solid hsl(214deg, 50%, 60%);

  }
</style>

<form action="#">
  <label>输入框1：<input type="text" /></label>
  <label>输入框2：<input type="text" /></label>
  <label>输入框3：<input type="text1" /></label>
  <input type="submit" value="提交" />
</form>

预览：

示例中使用 [type=text] 选择了 type 值为 "text" 的元素，即两个文本输入框，把它们的边框颜色改成了蓝色。对于输入框 3，因为错误的 type 类型会默认展示为文本输入框，这里可以看到它并没有被选择，它的边框还是原样。

[attr^=value]

[attr^=value] 用于匹配指定属性以指定值开头的元素，例如下方代码所示：

<style>
  [href^="/css"] {
    font-size: 24px;
  }
</style>

<a href="/css/css-attribute-selector">CSS 属性选择器</a>
<a href="/css/css-class-selector">CSS Class 选择器</a>
<a href="/resources">资源</a>

预览：

这里选择了 href 属性以 "/css" 开头的元素，也就是前两个 <a/> 元素，修改了它们的字体大小

[attr$=value]

[attr$=value] 用于匹配指定属性以指定值结尾的元素，例如下方代码所示：

<style>
  [href$="resources"] {
    font-size: 24px;
  }
</style>

<a href="/css/css-attribute-selector">CSS 属性选择器</a>
<a href="/css/css-class-selector">CSS Class 选择器</a>
<a href="/resources">资源</a>

预览：

这里选择了 href 属性以 "resources" 结尾的元素，也就是最后一个 <a/> 元素，修改了它的字体大小。

[attr~=value]

[attr~=value] 用于选择这样的属性：

1. 属性值由多个以空格分开的单词组成。
2. 其中某个单词精确等于 value 指定的值。

示例代码如下：

<style>
  [class~=red] {
    color: red;
  }
</style>

<p class="paragraph red large">段落1</p>
<p class="paragraph blue">段落2</p>
<span class="text red">文字1</span>

预览：

示例中，class 的属性值是由多个以空格分隔的单词组成，我们使用 [attr~=value] 选择了包含 red 的元素，即第一个 p 和最后的 span 元素，这里等价于 ".red" class 选择器。

[attr*=value]

[attr*=value] 用于选择特定的属性包含指定字符串的元素，示例代码如下：

<style>
  [href*="css"] {
    font-size: 24px;
  }
</style>

<a href="/css/css-attribute-selector">CSS 属性选择器</a>
<a href="/css/css-class-selector">CSS Class 选择器</a>
<a href="/css/resources">资源</a>

预览：

这里选择了所有 href 属性中，包含 "css" 字样的元素，这里所有的 a 元素都符合条件，所以样式均生效了。

[attr|=value]

[attr|=value] 用于精确匹配属性值，或者属性值后面紧跟短中线 "-" 的，经常用于选择属性中有语言代码的元素，示例代码如下：

<style>
  [lang|="zh"] {
    color: red;
  }
</style>

<a lang="zh-CN">中文</a>
<a lang="en-US">English</a>

预览：

这里选择了 lang 属性值为 "zh" 的元素，这里只有第一个 a 的 lang 属性有 zh 字样，并且它后面有 "-"，所以可以选择到并成功的应用了样式。

小结

CSS 属性选择器用于选择特定的属性，并且属性值满足条件的元素，有精确匹配，前缀匹配、后缀匹配等，种类繁多，符号也容易记混，日常在开发中，可以随时查阅资料，不需要刻意记住，只需要记住几个常用的即可。