属性选择器可基于元素属性及值精准选中目标，支持基础选择、精确匹配、模糊匹配（如包含、开头、结尾）、多属性组合与大小写控制，减少冗余class，提升样式灵活性与可维护性。
属性选择器是CSS中非常实用的功能，它让你可以根据元素的属性及其值来精确地选择目标元素。相比类名或标签选择器，属性选择器更灵活，尤其适合处理动态内容或表单样式控制。以下是几个常用且高效的使用技巧。
1. 基础属性选择：选择带有特定属性的元素
只要元素拥有某个属性，无论其值是什么，都可以被选中。
例如，你想为所有带 title 属性的链接添加提示样式：a[title] { text-decoration: underline; color: #0066cc; }
这样所有包含 title 的 a 标签都会应用该样式，有助于提升可访问性。2. 精确匹配属性值
使用等号（=）可以匹配属性值完全一致的元素。
立即学习“前端免费学习笔记（深入）”；
比如，只给指向外部网站的链接加图标：a[href="https://example.com"] { background: url(icon-external.png) right center no-repeat; padding-right: 20px; }
这个方法适用于需要对特定链接做特殊处理的情况。3. 模糊匹配：子串和模式匹配
属性选择器支持多种符号进行模糊匹配，提升灵活性。
- [href*="example"]：匹配 href 中包含 "example" 的所有链接（可用于高亮站外链接）
- [href^="https"]：匹配以 https 开头的链接（常用于安全链接标识）
- [href$=".pdf"]：匹配以 .pdf 结尾的链接（自动为 PDF 文件添加下载图标）
4. 多属性组合增强精度
你可以同时限定多个属性，缩小选择范围。
例如，只想选中禁用状态的文本输入框：input[type="text"][disabled] { background-color: #f2f2f2; color: #999; }
又或者，只选中被选中的复选框：input[type="checkbox"][checked] { outline: 2px solid blue; }
组合写法能避免污染其他类型的表单控件。5. 属性大小写与语言匹配控制
默认情况下，属性值匹配是大小写敏感的。但你可以通过 i 修饰符忽略大小写。
img[src$=".PNG" i] { border: 1px solid #ddd; }
加上 i 后，.png、.PNG、.PnG 都会被匹配。另外，[lang|="en"] 可匹配 lang 为 en 或 en-US 的元素，适合多语言页面布局调整。基本上就这些。属性选择器简洁有力，合理使用可以减少HTML中多余的 class，让代码更干净。关键是根据实际场景选择合适的匹配方式，避免过度复杂化选择器链。不复杂但容易忽略。
