属性选择器可精准选中带特定属性的元素。1. [attribute] 选有该属性的元素；2. [attribute="value"] 选属性值完全匹配的元素；3. [attribute*="value"] 包含、~="value" 为空格分隔单词之一、|="value" 为连字符开头、^="value" 以前缀开头、$="value" 以后缀结尾；4. 可组合多个属性或与标签类名结合，提升精确度，减少冗余类名，但需注意性能。
在CSS中，可以通过属性选择器来选中具有特定属性或特定属性值的元素。这种方式非常实用，尤其在没有特定类名或ID的情况下。
1. 基本属性选择器 [attribute]
选择具有某个属性的元素，不论属性值是什么。
例如：选择所有拥有 title 属性的元素css:
[title] { color: blue; }
立即学习“前端免费学习笔记（深入）”；
2. 精确属性值选择器 [attribute="value"]
选择属性值完全匹配指定值的元素。
例如：选择 type="submit" 的按钮css:
[type="submit"] { background: green; }
也可以用于自定义属性：[data-role="admin"] { font-weight: bold; }
3. 属性值包含选择器
根据属性值的匹配方式，有几种变体：
[attribute*="value"]：值中包含指定字符串（任意位置）例如：选择 href 中包含 "github" 的链接
[href*="github"] { color: purple; }
[attribute~="value"]：值是空格分隔的单词之一例如：<span class="icon menu close"></span>
[class~="menu"] { display: block; }
[attribute|="value"]：值是连字符分隔的，且以指定值开头常用于语言属性：
[lang|="zh"] 匹配 lang="zh" 或 lang="zh-CN"
[attribute^="value"]：值以指定字符串开头例如：选择邮箱输入框
[name^="email"] { border: 2px solid blue; }
[attribute$="value"]：值以指定字符串结尾例如：选择PDF文件链接
[href$=".pdf"] { background: url(icon-pdf.png); }
4. 多属性组合使用
可以组合多个属性选择器，提高精确度。
例如：选择 name 以 user 开头且 required 的输入框[name^="user"][required] { border-color: red; }
也可以结合标签或类名：input[type="text"].custom-input { padding: 10px; }
基本上就这些。属性选择器灵活强大，合理使用能减少HTML中的冗余类名，让样式更精准。注意性能，避免过度复杂的选择器嵌套。不复杂但容易忽略。
