CSS 属性选择器

属性选择器根据元素的属性及其值来选中元素，写法用方括号 []。适合选中有特定 class、href、type、data-* 等的元素，而不必多写 class。

基本形式

写法	含义
[attr]	有该属性的元素
[attr=value]	属性值完全等于 value（区分大小写）
[attr^=value]	属性值以 value 开头
[attr$=value]	属性值以 value 结尾
[attr*=value]	属性值包含 value 子串
[attr~=value]	属性值是以空格分隔的列表，其中有一项等于 value
[attr|=value]	属性值等于 value 或以 value- 开头（如 lang）

---

示例

有某属性即可

a[href] {
  color: blue;
}

input[required] {
  border-color: red;
}

属性值完全匹配

input[type="text"] { width: 200px; }
input[type="submit"] { background: #0066cc; }
a[href="https://example.com"] { }

开头 / 结尾 / 包含

a[href^="https"] { /* 以 https 开头 */ }
a[href$=".pdf"] { /* 以 .pdf 结尾，可用来给 PDF 链接加图标 */ }
img[src*="thumb"] { /* src 里包含 thumb */ }

class 多值中的一项（~=）

[class~="btn"] { /* class 里有单独一个词是 btn，如 "btn primary" */ }

忽略大小写（i）

在方括号前加 i 可忽略大小写（部分浏览器支持）：

a[href^="https" i] { }

---

与标签组合

input[type="text"] { }
button[disabled] { }
div[data-id="123"] { }

---

小结

• ** [attr] ：有该属性； [attr=value] **：值完全相等。
• ** [attr^=value] ：开头； [attr$=value] ：结尾； [attr*=value] **：包含。
• 适合选 type、href、data-*、required 等，减少多余 class。

下一节学习 CSS 表单。