属性选择器通过方括号[]根据元素属性精准匹配：可选有某属性的元素如[title]，或精确匹配值如input[type="text"]；2. 支持多种匹配方式：~=匹配词（空格分隔），*=模糊包含，^=开头，$=结尾，|=等于或连字符开头，适用于class、href、src等属性场景。
CSS 属性选择器允许你根据元素的属性及属性值来选择并样式化特定元素，非常实用且灵活。只需在选择器中使用方括号 [] 包裹属性名或条件即可。
1. 匹配具有某属性的元素
只要元素拥有指定属性，无论其值是什么，都会被选中。
例如：选择所有带有 title 属性的元素[title] { color: blue; }
这段样式会让所有包含 title 属性的元素文字变蓝，比如 首页2. 匹配属性值完全相等的元素
使用等号 = 可精确匹配属性值。
立即学习“前端免费学习笔记（深入）”；
例如：选择 type 属性值为 "text" 的 input 元素input[type="text"] { border: 1px solid #ccc; }
这样只会作用于文本输入框，不会影响密码框或按钮
3. 匹配属性值包含某个词（以空格分隔）
使用 ~= 可匹配属性值中包含指定单词的情况，常用于 class 属性（class 支持多个类名，空格分隔）
例如：选择 class 中包含 "btn" 的元素[class~="btn"] { padding: 10px; }
能匹配，但不能匹配 class="button"
4. 匹配属性值包含子串
使用 *= 可匹配属性值中包含某段字符的元素，属于模糊匹配。
例如：选择 href 中包含 "example.com" 的链接a[href*="example.com"] { color: green; }
适用于高亮站外链接或特定域名链接5. 其他常用属性匹配方式
- ^=：匹配属性值以某字符串开头。如 img[src^="https"] 选择 HTTPS 图片
- $=：匹配属性值以某字符串结尾。如 a[href$=".pdf"] 给 PDF 链接加图标
- |=：匹配属性值等于某字符串或以该字符串加连字符开头。适合语言属性，如 [lang|="en"]
基本上就这些常见用法。属性选择器不依赖类名或标签，适合处理 HTML 属性本身带来的语义信息，提升样式的精准控制能力。
