用[attr]可匹配任意带该属性的元素，无论值是否存在或为何值，如[title]匹配、及；IE7+支持，注意兼容性。
怎么用[attr]匹配带某个属性的元素
只要元素有这个属性，不管值是什么都选中。比如[title]能同时选中<img title="头像">和<a title=""></a>，甚至<div title>（布尔属性省略等号也成立）。<p>常见错误是以为必须写全值——其实不写值就是“存在即匹配”。注意IE7+才支持，老项目要核对兼容性。</p>
<ul>
<li>适合场景：统一给所有带<code>data-* 属性的元素加样式，或批量处理含required的表单控件
[class]上用——它会把所有带class属性的元素都拉进来，包括class=""，容易误伤
[attr="value"]精确匹配属性值时要注意什么
等号两边不能有空格，[type= "email"]这种写法在多数浏览器里直接失效。值要用引号包住，尤其含空格或特殊字符时——[data-id="123 abc"]不加引号会只认到123。
这个选择器对大小写敏感：[lang="en"]不会匹配lang="EN"。HTML规范里lang、type等属性值本身不区分大小写，但CSS选择器层面仍按字面匹配。
- 适合场景：锁定特定类型的输入框，比如
input[type="submit"]，避免影响button[type="reset"] - 性能提示：纯属性匹配比类名慢一点，高频渲染区域慎用过多
[data-*="xxx"] - 值里的反斜杠、引号要转义，例如匹配
data-tip="He said: \"Hi\""得写成[data-tip="He said: \"Hi\""]
用[attr~="val"]匹配空格分隔的单词
这是为class、rel这类允许空格分隔多值的属性设计的。[class~="btn"]能命中class="btn primary"，但不会匹配class="btn-large"——它只认独立单词，不是子串。
很多人误用~="去匹配data-* 自定义属性，结果失败。除非你明确用空格分隔多个值（比如data-role="header footer"），否则别碰它。
- 典型误用：
[data-tags~="react"]想匹配data-tags="react vue"可以，但匹配data-tags="react-native"不行 - 和
[class="btn"]不同，[class~="btn"]不会漏掉带多个class的元素，更接近日常需求 - 注意：HTML解析时多个连续空格会被压缩成一个，所以
class="btn primary"和class="btn primary"效果一样
[attr^="val"]、[attr$="val"]、[attr*="val"]这些“伪正则”怎么避坑
它们不是正则，只是字符串开头/结尾/包含匹配，不支持.*或转义。比如[href$=".pdf"]能抓doc.pdf，但[href$="*.pdf"]会整个失效。
最常踩的坑是忽略URL编码——[href*="user?id="]匹配不了user%3Fid%3D123，因为浏览器已解码，而选择器按渲染后DOM的属性值匹配。
-
^=适合处理统一前缀的资源，如[src^="https://cdn.example.com/"]标记外链图片 -
$=慎用于文件扩展名，.jpg可能被写成.jpeg或带查询参数：[src$=".jpg?ver=2"]就挂了 -
*=性能最差，全量扫描属性值，避免在长列表里用在data-*上做模糊搜索
属性选择器链越长，优先级越高，但可读性越低。比如input[type="text"][disabled][data-validated]虽然精准，但改一个条件就得重调整个选择器——留点余地比一步到位更实际。
