CSS 属性选择器

无论是类选择器或者 ID选择器, 本质上都是元素的属性来做匹配。

这里我们来了解以下 属性选择器(attribute selector). 它可以基于元素的属性名称和属性值来匹配元素。

有四种类型的属性选择器：

  1. 简单属性选择器 (Simple attribute selector)
  2. 精确属性值选择器 (Exact attribute value selector)
  3. 部分匹配属性值选择器 (Partial-match attribute value selector)
  4. 前导值属性选择器 (Leading-value attribute selector)

1. 简单属性选择器

如果你想选中哪些包含某个特定属性名称的元素，而不关心这个属性的值， 可以使用 简单属性选择器。

例如，你想选中所有带有 class 属性的 h1 元素， 可以这样写：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    h1[class] {color: silver;}
  </style>
</head>
<body>
<h1 class="hoopla">Hello</h1>
<h1>Serenity</h1>
<h1 class="fancy">Fooling</h1>
</body>
</html>

你也可以用它来选择哪些包含多个特定属性名称的元素。

比如，选中同时包含 href 和 title 属性的 a 元素：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    a[href][title] {font-weight: bold;}
  </style>
</head>
<body>
<a href="https://www.w3.org/" title="W3C Home">W3C</a><br />
<a href="https://developer.mozilla.org">Standards Info</a><br />
<a title="Not a link">dead.letter</a>
</body>
</html>

2. 精确属性值选择器

你可以通过指定属性的值来进一步缩小匹配的元素的范围。

比如， 你想给所有指向特定链接地址的 a 元素设置粗体，你可以这样实现：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    a[href="https://www.w3.org"] {font-weight: bold;}
  </style>
</head>
<body>
<a href="https://www.w3.org" title="W3C Home">W3C</a><br />
<a href="https://developer.mozilla.org">Standards Info</a><br />
</body>
</html>

和简单属性选择器一样， 你也可以组合多个属性选择器来更精确的匹配元素，

比如：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    a[href="https://www.w3.org/"][title="W3C Home"] {font-size: 200%;}
  </style>
</head>
<body>
<a href="https://www.w3.org/" title="W3C Home">W3C</a><br />
<a href="https://developer.mozilla.org"
title="Mozilla Developer Network">Standards Info</a><br />
<a href="http://www.example.org/" title="W3C Home">confused.link</a>
</body>
</html>

3. 部分匹配属性值选择器

有时候， 你又想通过部分属性值来匹配元素。CSS 提供了以下选项：

TypeDescription
[foo~="bar"]匹配所有包含 foo 属性并且它的值中包含 bar 的元素 (bar 需要是一个完整的单词)
[foo*="bar"]匹配所有包含 foo 属性并且它的值中包含 bar 子字符串
[foo^="bar"]匹配所有包含 foo 属性并且它的值以 bar 开头
[foo$="bar"]匹配所有包含 foo 属性并且它的值以 bar 结尾
[foo|="bar"]匹配所有包含 foo 属性并且它的值以 bar 开头后面紧跟 - 或者完全等于 bar

3.1 匹配空格分隔列表中的一个单词

对于任何一个接受以空格分隔符的单词列表作为它的值的属性，你都可以通过是否出现某个单词的规则来匹配到它。

(For any attribute that accepts a space-separated list of words, you can select elements based on the presence of any one of those words. )

比如， 你想选中所有包含 class 属性，并且class 属性的值中包含 warning 的元素，你可以这样写：

p[class~="warning"] {font-weight: bold;}

它等于同

p.warning {font-weight: bold;}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    span[class~="barren"] {font-style: italic;}
  </style>
</head>
<body>
<span class="barren rocky">Mercury</span>
<span class="cloudy barren">Venus</span>
<span class="life-bearing cloudy">Earth</span>
</body>
</html>

这里 "Mercury" 和 "Venus" 均被选中。

3.2 匹配属性值中的子字符串

有时，你希望根据元素的属性值的一部分来选择元素，但这些值并不是以空格分隔的单词列表。这种情况下，你可以使用 [attr*="val"] 来匹配元素。

例如：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    span[class*="cloud"] {font-style: italic;}
  </style>
</head>
<body>
<span class="barren rocky">Mercury</span>
<span class="cloudy barren">Venus</span>
<span class="life-bearing cloudy">Earth</span>
</body>
</html>

span[class*="cloud"] 会匹配所有 class 属性中包含 "cloud" 子字符串的 span 元素， 包含 "cloudy" 属性的 span 也会被选中。

3.3 匹配属性值开头的子字符串

如果您想根据属性值开头的子字符串来选择元素，那么 [att^="val"] 就是你要找的。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    a[href^="https:"] {font-weight: bold;}
    a[href^="mailto:"] {font-style: italic;}
  </style>
</head>
<body>
<p><a href="https://www.w3schools.com">W3Schools</a></p>
<p><a href="mailto://example@example.com">Email</a></p>
<p><a href="ftp://example.com">FTP</a></p>
</body>
</html>

3.4 匹配属性值末尾的子字符串

如果您想根据属性值末尾的子字符串来选择元素，那么 [att$="val"] 就是你要找的。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    a[href$=".cn"] {font-weight: bold;}
  </style>
</head>
<body>
<p><a href="https://www.w3schools.com">.com</a></p>
<p><a href="mailto://example@example.cn">.cn</a></p>
<p><a href="ftp://example.io">.io</a></p>
</body>
</html>

3.5 匹配属性值的子集

通过一个例子来描述一下如何使用： [foo|="bar"]

例如：

*[lang|="en"] {color: white;}

这个规则将匹配所有 lang 属性等于 en 或以 en- 开头的元素。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    *[lang|="en"] {color: red;}
  </style>
</head>
<body>
<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G'day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>
</body>
</html>

4. 不区分大小写

在属性选择器的右括号前添加一个 i，该选择器将不区分大小写地匹配属性值，而不受文档语言规则的限制。

a[href$='.PDF' i]

它将匹配 .pdf, .PDF, .Pdf 等等。

分类

css
8
ui
8
html
8
Published at:
June 18, 2025
Keywords:
css
ui
selector