多个属性选择器连写（如data-role）表示元素必须同时具备这些属性，中间不加空格；[attr~="value"]用于匹配空格分隔的独立单词值；:is()和:where()可简化多重条件选择，但:is()继承最高权重，:where()权重为0。
多个属性同时存在怎么写
只要把多个属性选择器连在一起写，中间不加空格，就表示“必须同时具备这些属性”。比如想选既有 data-role 又有 data-state 的按钮，直接写：[data-role][data-state]。它不关心值是什么，只检查这两个属性是否都存在。
常见错误现象：
- 写成
[data-role] [data-state]（带空格）→ 变成后代选择器，语义完全跑偏 - 误以为必须指定值才有意义，其实空属性检查本身就有用（比如判断是否被 JS 注入了某个标记）
使用场景：
- 区分由不同模块注入的 DOM：
[data-module="auth"][data-loaded] - 筛选带双重控制属性的表单控件：
input[required][data-validate] - 配合 BEM 命名做轻量状态隔离：
.card[data-status="loading"][data-size="large"]
属性值组合匹配怎么避免误选
用 [attr~="value"] 匹配空格分隔的多值属性（如 class、rel），是唯一能精确命中“独立单词”的方式。比如 [class~="btn"] 能匹配 class="btn primary"，但不会匹配 class="btn-primary" 或 class="subtle-btn"。
立即学习“前端免费学习笔记（深入）”；
为什么不用 [class*="btn"]？它会子串匹配，容易漏控或过度匹配。真实项目里，class*="error" 会同时选中 form-error 和 server-error，破坏语义边界。
注意事项：
-
[attr~="value"]区分大小写，[lang~="en" i]才能忽略大小写 - 不能用于连字符分隔的值（如
data-locale="zh-CN"），那种该用[attr|="zh"] - 和标签、伪类联用可进一步收窄范围：
button[data-type~="primary"]:not([disabled])
:is() 和 :where() 怎么简化多重条件
当你要为多种不同结构的元素统一应用某套样式（比如所有「可点击且已启用」的控件），:is() 能大幅减少重复书写。例如：:is(button, a, [role="button"]):enabled 表示“是 button 或 a 或有 role=button 的元素，且处于启用状态”。
:where() 功能类似，但权重为 0，适合覆盖高权重规则时用——比如你有一条 #sidebar .btn { color: red; }，想用一条更通用的规则覆盖它，用 :where(.btn:disabled) { color: #999; } 就不会被前面那条压住。
注意点：
-
:is()会继承其内部最重的选择器权重，:is(.foo, #bar)的权重等同于#bar - 两者都不支持 IE，Chrome 100+、Firefox 100+、Safari 15.4+ 开始稳定支持
- 别嵌套太深：
:is(:is(...))可读性差，也无实际增益
交集选择器和属性选择器混用时的坑
像 button.primary[data-loading] 这种写法，表面看是“button 标签 + class=primary + data-loading 属性”，但它实际要求这三个条件全部落在同一个元素上。如果 data-loading 是加在父容器上的，这条规则就完全不生效。
容易忽略的关键点：
- 顺序不影响匹配结果，但影响可读性；建议按“标签 → 类 → 属性 → 伪类”排列，如
input.required[type="email"]:focus - 交集选择器不提升特异性，
.a.b.c和.a权重一样，都是 0,1,0 - 动态添加类或属性时，要确保空格和引号闭合正确，
el.className += " loading"比el.className += "loading"更安全
真正难调试的是：当多个条件看似都满足，但样式没生效，大概率是其中某个条件实际没落在目标元素上，或者被更高权重的规则覆盖了——这时候得用浏览器开发者工具逐层核对 computed styles 和 match list。
