CSS 属性选择器

属性选择器 (Attribute Selectors) 允许你根据 HTML 属性的存在、值或部分值来定位元素。

这提供了一种强大的方法，无需依赖类或 ID 即可应用样式，使你的 CSS 更加灵活和易于维护。在处理动态生成的内容或基于特定数据属性（如 data-*）设置样式时，它们特别有用。

1. 理解属性选择器

属性选择器有多种形式，每种形式提供不同的定位方式。以下是不同类型的细分：

1. [attribute]：定位拥有指定属性的元素，不论其值为何。
2. [attribute="value"]：定位指定属性具有确切指定值的元素。
3. [attribute~="value"]：定位指定属性包含指定值（作为空格分隔的单词之一）的元素。
4. [attribute|="value"]：定位指定属性以指定值开头，后跟连字符 (-) 的元素。通常用于语言代码（例如 en-US）。
5. [attribute^="value"]：定位指定属性以指定值开头的元素。
6. [attribute$="value"]：定位指定属性以指定值结尾的元素。
7. [attribute*="value"]：定位指定属性在字符串中任意位置包含指定值的元素。

让我们通过示例来探索每一个。

1.1 属性存在：[attribute]

此选择器仅检查元素是否存在某个属性。

<a href="https://www.example.com">带 href 的链接</a>
<p title="一个标题">带 title 的段落</p>
<a>不带 href 的链接</a>

a[href] {
  color: blue;
  text-decoration: none;
}
p[title] {
  font-style: italic;
}

• 第一条规则只样式化第一个 <a> 标签，因为它有 href 属性。
• 第二条规则样式化 <p> 标签，因为它有 title 属性。
• 第二个 <a> 标签不会被样式化。

1.2 精确值匹配：[attribute="value"]

此选择器定位属性值与指定值完全匹配的元素。

<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">

input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}
input[value="提交"] {
  background-color: green;
  color: white;
}

• 第一条规则样式化文本输入框。
• 第二条规则样式化提交按钮，因为它的 value 属性正是 "提交"。

1.3 空格分隔值：[attribute~="value"]

当属性包含一列空格分隔的值（如 class 属性）时，此选择器很有用。

<div class="button primary call-to-action">点我</div>
<div class="button secondary">取消</div>

div[class~="button"] {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
div[class~="primary"] {
  background-color: blue;
  color: white;
}

1.4 连字符分隔值：[attribute|="value"]

通常用于语言代码。

<p lang="en-US">Hello, World!</p>
<p lang="en-GB">Hello, World!</p>
<p lang="en">Hello, World!</p>
<p>Bonjour le monde!</p>

p[lang|="en"] {
  font-weight: bold;
}

• 此规则将样式化前三个 <p> 元素，因为它们的 lang 属性以 "en" 开头且后跟连字符，或是确切的 "en"。

1.5 以...开头：[attribute^="value"]

定位属性值以指定字符串开头的元素。

<a href="https://www.begindev.com/page1">页面 1</a>
<a href="https://www.begindev.com/page2">页面 2</a>
<a href="http://www.anotherdomain.com/page3">页面 3</a>

a[href^="https://www.begindev.com"] {
  color: green;
}

此规则将样式化前两个 <a> 元素，因为它们的 href 以 "https://www.begindev.com" 开头。

1.6 以...结尾：[attribute$="value"]

定位属性值以指定字符串结尾的元素。常用于根据文件类型设置样式。

<img src="images/logo.png">
<img src="images/banner.jpg">
<img src="images/icon.svg">

img[src$=".png"] {
  border: 2px solid red;
}

此规则将样式化第一个 <img> 元素，因为它的 src 以 ".png" 结尾。

1.7 包含：[attribute*="value"]

定位属性值在字符串中任意位置包含指定值的元素。

<input type="text" data-custom-validation="required email">
<input type="text" data-custom-validation="required phone">
<input type="text">

input[data-custom-validation*="required"] {
  border: 1px solid orange;
}

• 此规则将样式化前两个 <input> 元素，因为它们的 data-custom-validation 属性包含单词 "required"。

2. 实战示例与演示

2.1 基于文件类型样式化链接

你可以使用属性选择器根据链接指向的文件类型来设置样式。

a[href$=".pdf"] {
  color: red; /* PDF 链接变红 */
  /* 可以添加 PDF 图标 */
}
a[href$=".pptx"] {
  color: blue; /* PPTX 链接变蓝 */
}

2.2 基于属性样式化表单元素

属性选择器在表单样式中非常有用。

input[type="text"] { ... }
input[type="email"] { ... }
input[required] {
  background-color: #f0f0f0; /* 高亮必填字段 */
}
button[type="submit"] { ... }

2.3 使用 Data 属性 (Data Attributes)

data- 属性用于存储自定义数据。

<div data-theme="dark">深色主题内容</div>
<div data-theme="light">浅色主题内容</div>

div[data-theme="dark"] {
  background-color: #333;
  color: white;
}
div[data-theme="light"] {
  background-color: #fff;
  color: black;
}