CSS 属性选择器

CSS 属性选择器

CSS 中的属性选择器允许你根据属性的存在或属性的特定值来选择和样式化 HTML 元素。它们提供了一种强大的方式来定位元素，而无需完全依赖类或 ID。

使用特定属性样式化 HTML 元素

属性选择器非常灵活，并且在所有现代 Web 浏览器中都得到良好支持。它们提供了对元素选择的细粒度控制。

1. [attribute] 选择器（存在性）

选择具有指定属性的元素，无论其值是什么。

示例：样式化所有具有 target 属性的 <a> 元素：

a[target] {
  background-color: yellow;
  font-weight: bold;
}

这将样式化 <a href="..." target="_blank"> 和 <a href="..." target="_self">，但不样式化 <a href="...">。

2. [attribute="value"] 选择器（精确值）

选择指定属性具有精确、区分大小写的值的元素。

示例：样式化所有 target="_blank" 的 <a> 元素：

a[target="_blank"] {
  color: green;
  text-decoration: underline dashed;
}

示例：样式化所有类型为 text 的输入字段：

input[type="text"] {
  border: 2px solid steelblue;
  padding: 5px;
}

3. [attribute~="value"] 选择器（空格分隔列表中的单词）

选择属性值是空格分隔单词列表的元素，并且其中一个单词与指定的 value 完全匹配。

示例：样式化 title 属性中包含单词 “important” 的元素：

[title~="important"] {
  border: 2px solid red;
  font-weight: bold;
}

这将匹配 title="very important note" 或 title="important"，但不匹配 title="unimportant" 或 title="importance"。

4. [attribute|="value"] 选择器（以 Value 或 Value- 开头）

选择属性值与 value 精确匹配，或以 value 紧跟着一个连字符 (-) 开头的元素。这常用于语言子代码匹配。

示例：样式化 lang 属性为 “en” 或以 “en-” 开头的元素：

[lang|="en"] {
  font-style: italic;
}

这将匹配 lang="en"、lang="en-US" 和 lang="en-GB"，但不匹配 lang="english" 或 lang="fr-en"。

5. [attribute^="value"] 选择器（以…开头）

选择属性值以指定的 value 开头的元素。匹配不需要是整个单词。

示例：样式化所有 href 属性以 “https://” 开头的 <a> 元素：

a[href^="https://"] {
  background-image: url('secure-icon.png');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 18px; /* Space for the icon */
}

6. [attribute$="value"] 选择器（以…结尾）

选择属性值以指定的 value 结尾的元素。匹配不需要是整个单词。

示例：样式化所有 href 属性以 “.pdf” 结尾的 <a> 元素：

a[href$=".pdf"] {
  font-weight: bold;
  color: darkred;
  /* Add a PDF icon, for example */
}

7. [attribute*="value"] 选择器（包含）

选择属性值包含指定的 value 子字符串的元素。匹配不需要是整个单词。

示例：样式化所有 alt 文本中包含单词 “profile” 的 <img> 元素：

img[alt*="profile"] {
  border-radius: 50%; /* Make profile images circular */
  border: 3px solid dodgerblue;
}

大小写不敏感（CSS 选择器 Level 4）

CSS 选择器 Level 4 引入了大小写不敏感标记 i 用于属性选择器。这允许匹配属性值，不区分大小写。

示例：选择 type 为 TEXT、text、Text 等的 input 元素：

input[type="text" i] {
  background-color: lightyellow;
}

现代浏览器对 i 标记的支持良好，但如果需要支持旧版浏览器，请务必检查兼容性。

实际用例：样式化表单

属性选择器对于样式化表单元素特别有用，无需为每个输入元素添加类。

/* Style text, email, and password inputs */
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

/* Style required fields differently */
input[required] {
  border-left: 3px solid red;
}

进一步探索

属性选择器可以与其他选择器（如类选择器、ID 选择器或伪类选择器）结合使用，以实现更精确的目标定位。有关完整参考和更多示例，请查阅 MDN Web Docs 关于属性选择器的文档或 W3C 官方 CSS 规范。