CSS 属性选择器（Attribute Selector）允许根据元素的属性及其值来选择 HTML 元素，并应用相应的 CSS 样式。它为选择元素提供了更强大的灵活性，可以根据元素的属性、属性值或者属性值的一部分来进行样式化。

1️⃣ 基本语法

element[attribute="value"] {
  /* 样式 */
}
  • element 是要选择的 HTML 元素（可选）。
  • attribute 是元素的属性名。
  • "value" 是属性的值，值是可选的。

2️⃣ 常见的属性选择器

1. 完全匹配属性值

选择具有指定属性且属性值完全匹配的元素。

/* 选择所有 `type` 属性值为 "text" 的 `<input>` 元素 */
input[type="text"] {
  border: 1px solid #ccc;
}

2. 部分匹配属性值

  • 以某个值开头的属性值（^=） 选择属性值以指定的字符串开头的元素。 /* 选择所有 `href` 属性以 "https" 开头的 `<a>` 元素 */ a[href^="https"] { color: green; }
  • 以某个值结尾的属性值（$=） 选择属性值以指定的字符串结尾的元素。 /* 选择所有 `src` 属性以 ".jpg" 结尾的 `<img>` 元素 */ img[src$=".jpg"] { border: 2px solid red; }
  • 包含某个值的属性值（*=） 选择属性值中包含指定字符串的元素。 /* 选择所有 `class` 属性值包含 "icon" 的 `<div>` 元素 */ div[class*="icon"] { background-color: lightblue; }

3. 匹配属性值的一部分

  • 以某个字符串为前缀的多个类名（|=） 选择属性值为指定的字符串或以该字符串为前缀并用连字符（-）分隔的元素。 /* 选择所有 `lang` 属性值为 "en" 或以 "en" 为前缀的元素 */ p[lang|="en"] { font-family: Arial, sans-serif; }

4. 不完全匹配属性值

  • 存在某个属性（没有指定属性值） 选择具有指定属性的元素，无论该属性的值是什么。 /* 选择所有具有 `disabled` 属性的 `<button>` 元素 */ button[disabled] { background-color: grey; }
  • 属性值不等于某个指定值（!=，不常见，部分浏览器支持） 选择属性值不等于某个指定值的元素。 /* 选择所有 `type` 属性值不是 "text" 的 `<input>` 元素 */ input[type!="text"] { background-color: lightyellow; }

3️⃣ 多个属性选择器的组合

你还可以组合多个属性选择器，以便对符合多个条件的元素应用样式。

/* 选择所有 `input` 元素，且 `type` 为 "text" 并且 `placeholder` 为 "Enter name" */
input[type="text"][placeholder="Enter name"] {
  border: 2px solid blue;
}

4️⃣ 组合选择器与通用选择器

CSS 属性选择器不仅可以与元素选择器组合，也可以与其他选择器一起使用。例如：

  • 元素选择器 + 属性选择器：选择特定元素且具有特定属性值的元素。
  • 类选择器 + 属性选择器：选择特定类且具有特定属性值的元素。
/* 选择所有带有 `.button` 类，且 `disabled` 属性存在的元素 */
.button[disabled] {
  opacity: 0.5;
}

5️⃣ 应用实例

  1. 选择所有带有 href 属性的 <a> 元素
a[href] {
  color: blue;
  text-decoration: underline;
}
  1. 选择所有 id 属性以 “user-” 开头的元素
div[id^="user-"] {
  background-color: lightgreen;
}
  1. 选择所有 data- 属性包含 “color” 的元素
div[data-color*="red"] {
  border: 2px solid red;
}
  1. 选择所有 src 属性以 .png 结尾的图片
img[src$=".png"] {
  width: 100%;
  height: auto;
}

🎯 总结

  • CSS 属性选择器允许你根据元素的属性及其值来选择元素。
  • 常见的属性选择器包括完全匹配、部分匹配、以某值开头、结尾或包含某个值。
  • 属性选择器提供了更强大的选择能力，适用于更复杂的样式设置需求。
  • 通过组合多个属性选择器和其他类型的选择器，可以精确地选择特定的元素，增强 CSS 的灵活性。

使用属性选择器可以更细致地控制页面的样式，尤其是在处理具有多个属性值的元素时，具有很大的便利性。