属性选择器可精准选中带特定属性的HTML元素，无需依赖类名或ID。1. 基础用法：[title] 选所有含title属性的元素；2. 精确匹配：a[href="https://example.com"] 仅选指定链接；3. 部分匹配：[href*="example"] 匹配包含"example"的href；4. 多属性组合：inputtype="text" 同时满足两个属性。
在CSS中，如果只想选中具有特定属性的HTML标签，可以通过属性选择器来实现。它能精准匹配带有指定属性或属性值的元素，而不需要依赖类名或ID，非常适用于处理表单、链接、自定义属性等场景。
1. 基础属性选择器：选中包含某属性的元素
使用方括号 [属性名] 可以选中所有拥有该属性的标签，不管其值是什么。
- [title] —— 匹配所有带有 title 属性的元素
- a[href] —— 只选中有 href 的链接
- input[disabled] —— 选中被禁用的输入框
2. 按属性值精确匹配
如果需要选中属性值等于某个字符串的元素，可以使用等号 =。
- a[href="https://example.com"] —— 只匹配指向该网址的链接
- img[alt="logo"] —— 选中 alt 为 "logo" 的图片
- input[type="text"] —— 仅选中文本输入框
3. 按属性值的一部分匹配
当属性值较长或动态变化时，可以用特殊符号进行模糊匹配。
立即学习“前端免费学习笔记（深入）”；
- [href*="example"] —— href 中包含 "example" 的链接（子串匹配）
- [class^="btn-"] —— class 以 "btn-" 开头的元素
- [src$=".png"] —— src 以 ".png" 结尾的资源（如PNG图片）
4. 多属性组合更精准
可以同时限定多个属性，提升选择精度。
- input[type="text"][disabled] —— 同时是文本框且被禁用
- a[href^="https://"][target="_blank"] —— 外部链接且在新窗口打开
基本上就这些。属性选择器灵活又强大，特别适合在无法修改HTML结构时做样式控制。掌握好这些写法，能让你的CSS更简洁、更具针对性。不复杂但容易忽略。
