多个属性选择器连写必须紧挨着无空格，表示同时满足所有条件；顺序无关；常与标签或类组合提升精度；属性值含特殊字符须加引号；可与伪类连用但需注意优先级和兼容性。
多个属性选择器连写：必须紧挨着，不能有空格
多个属性选择器连写（如 input[type="text"][required]）表示“同时满足所有条件”的元素，这是最常用也最容易出错的精确定位方式。空格一加，语义立刻变成后代选择器，目标就偏了。
- ✅ 正确写法：
img[alt][src*="logo"]—— 选中既有alt属性、src又包含"logo"的img - ❌ 错误写法：
img[alt] [src*="logo"]—— 中间空格让它变成“img[alt]元素内部所有含 logo 的src属性的元素”，几乎不会命中预期目标 - ⚠️ 注意顺序无关：
button[data-id="123"][disabled]和button[disabled][data-id="123"]完全等价，CSS 不校验属性声明顺序
属性选择器 + 类/标签组合：缩小匹配范围
单靠属性容易过宽（比如 [data-role] 可能匹配几十个元素），所以常和标签名或类名拼接使用。这种组合既提升精度，又避免样式污染。
- 推荐写法：
a[href^="https://"][class*="external"]—— 只锁定以https://开头、且 class 名含"external"的链接 - 慎用纯属性组合：
[title][aria-label]理论上合法，但实际页面中极少有元素同时带这两个属性，容易白忙一场 - 性能提示：浏览器对属性选择器的匹配开销略高于类选择器，嵌套层级深时（如
div section [data-test]）建议前置更具体的选择器
常见错误：属性值里有空格或特殊字符没转义
属性值若含空格、引号、括号等，不加引号或引号类型错配，会导致整条规则失效，且无报错提示——这是调试时最隐蔽的坑之一。
- ❌
input[name=user name]——name值是"user name"，但没引号，CSS 解析器会截断为user，匹配失败 - ✅ 应写成：
input[name="user name"]或input[name='user name'] - ⚠️ 特殊字符如
]、^、$在属性值中必须用引号包裹，否则解析中断；input[value="100%"]必须加引号，否则%被当作无效符号丢弃
与伪类连用时的优先级和执行时机
属性选择器和伪类（如 :focus、:checked）可以一起用，但要注意它们不是“同时生效”，而是按 DOM 状态实时响应。而且连写后整体优先级升高，可能意外覆盖其他规则。
- 典型用例：
input[type="checkbox"]:checked + label—— 仅当 checkbox 被勾选时，才激活紧邻的label - 优先级陷阱：
input[disabled].error比.error优先级高，但比input.error[disabled]:hover低；多层叠加时建议用!important前先检查是否真有必要 - 兼容性提醒：
[type="range"]::-webkit-slider-thumb这类带伪元素的写法，在 Firefox 中不支持::-moz-range-thumb以外的语法，跨浏览器需分别处理
data-id 或随机 class 名，一旦后端改结构，样式就悄无声息地失效。比起堆砌属性，优先用语义化 class 配合少量属性约束，反而更耐折腾。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
