CSS属性选择器可根据元素的属性及属性值精准选中元素，无需依赖class或id。例如[title]选中所有含title属性的元素并设文字为蓝色；input[type="email"]为邮箱输入框添加红色边框；通过[attr~="value"]匹配空格分隔的独立单词，适用于多类名；[attr|="value"]匹配以指定值开头且后跟连字符的属性，常用于lang属性；[attr^="value"]选中属性值以某字符串开头的元素，如HTTPS链接；[attr$="value"]匹配以特定字符串结尾的属性值，可用于PNG图片；[attr*="value"]则匹配属性值包含指定字符串的情况，如含“baidu”的链接。实际应用包括：为外部链接添加“↗”图标、禁用按钮设置半透明与禁止光标、必填输入框加红色左框线。掌握这些选择器可减少class使用，使HTML更简洁，关键是根据场景选择合适匹配方式避免误选。
CSS属性选择器让你可以根据元素的属性及属性值来选中特定HTML元素，而不需要额外依赖class或id。这种方法在处理表单、链接或自定义属性时特别实用。
基础属性选择器
只要元素拥有指定属性，无论值是什么，都能被选中。
例如，选中所有带有 title 属性的元素：[title] { color: blue; }
这会将所有包含 title 属性的元素文字变为蓝色，比如段落
。精确匹配属性值
使用等号（=）可以精确匹配属性值，只有属性值完全相同时才生效。
立即学习“前端免费学习笔记（深入）”；
比如，只想选中 type 为 "email" 的输入框：
input[type="email"] { border: 2px solid red; }
这样页面中只有邮箱输入框会被加上红色边框，而 text 或 password 类型不受影响。部分值匹配选择器
当属性值是多个词（用空格或连字符分隔）时，可以用以下方式匹配部分内容：
- [attr~="value"]：匹配属性值中包含某个独立单词的元素。适用于 class 属性多类名的情况。
- [attr|="value"]：匹配属性值以某字符串开头，且后面紧跟连字符 - 或结束。常用于语言属性，如 lang="zh-CN"。
- [attr^="value"]：属性值以指定字符串开头。例如 a[href^="https"] 选中所有 HTTPS 链接。
- [attr$="value"]：属性值以指定字符串结尾。比如 img[src$=".png"] 可选中所有 PNG 图片。
- [attr*="value"]：属性值中包含指定字符串。比如 [href*="baidu"] 匹配链接中含有 baidu 的 a 标签。
实际应用场景示例
以下是几个常见用途：
- 给外部链接添加图标：a[href^="http"]:not([href*="yourdomain"])::after { content: "↗"; }
- 禁用特定按钮样式：button[disabled] { opacity: 0.6; cursor: not-allowed; }
- 高亮必填表单项：input[required] { border-left: 4px solid #f00; }
基本上就这些。掌握属性选择器能让你更灵活地控制样式，减少对 class 的依赖，让HTML更简洁。关键是理解不同匹配方式的适用场景，避免误选元素。
