跳到主要内容位置

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^="/docs/css"] {    font-size: 24px;  }</style>
<a href="/docs/css/css-attribute-selector">CSS 属性选择器</a><a href="/docs/css/css-class-selector">CSS Class 选择器</a><a href="/docs/resources">资源</a>

预览:

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

[attr$=value]#

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

<style>  [href$="resources"] {    font-size: 24px;  }</style>
<a href="/docs/css/css-attribute-selector">CSS 属性选择器</a><a href="/docs/css/css-class-selector">CSS Class 选择器</a><a href="/docs/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*="docs"] {    font-size: 24px;  }</style>
<a href="/docs/css/css-attribute-selector">CSS 属性选择器</a><a href="/docs/css/css-class-selector">CSS Class 选择器</a><a href="/docs/resources">资源</a>

预览:

这里选择了所有 href 属性中,包含 "docs" 字样的元素,这里所有的 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 属性选择器用于选择特定的属性,并且属性值满足条件的元素,有精确匹配,前缀匹配、后缀匹配等,种类繁多,符号也容易记混,日常在开发中,可以随时查阅资料,不需要刻意记住,只需要记住几个常用的即可。