多个类名连写（如.btn.primary）表示交集，即元素必须同时具备btn和primary两个class；:is()继承最高权重，:where()权重恒为0；~=匹配空格分隔单词，|=匹配连字符语言前缀；>匹配直接子元素，空格匹配后代元素。
多个类名连写是并集还是交集？
连写的类名（如 .btn.primary）表示“同时具备这两个类”，是交集关系，不是并集。浏览器会匹配同时含有 btn 和 primary 两个 class 属性值的元素。
常见错误是误以为它等价于 .btn, .primary（逗号分隔才是并集），结果发现样式没生效——其实是目标元素只加了其中一个 class。
- ✅ 正确用法：
<button class="btn primary">提交</button>
配合.btn.primary { color: blue; } - ❌ 错误写法：
<button class="btn">提交</button>
却期望.btn.primary生效 - ⚠️ 注意：顺序无关，
.primary.btn效果完全一样
:is() 和 :where() 的实际区别在哪？
:is() 和 :where() 都支持逻辑“或”组合，但权重处理完全不同——这是上线后突然样式失效的高频原因。
:is(.a, .b, .c) 的优先级等于其中最高优先级的选择器（比如 .b 是类选择器，那整个就是 10）；而 :where(.a, .b, .c) 权重恒为 0，永远无法覆盖其他规则。
立即学习“前端免费学习笔记（深入）”；
- 用
:is()替代长重复前缀时更安全：nav :is(.link, .menu-item, .cta) - 用
:where()做“无侵入式增强”更合适，比如统一给所有标题加锚点图标，又不想影响原有字体大小规则 - ⚠️ Safari 15.4+、Chrome 101+ 支持，旧版本需回退到手动展开或 JS 补充
属性选择器中 ~= 和 |= 什么时候该用？
[attr~=value] 匹配空格分隔的单词，适合 class 或自定义多值属性；[attr|=value] 匹配连字符分隔的“语言码前缀”，专用于 lang 属性。
例如 [lang|=zh] 能命中 lang="zh"、lang="zh-CN"，但不能命中 lang="zh_cn"（下划线不被识别）；而 [class~=hidden] 可以匹配 class="sidebar hidden print-only"。
- 别用
^=模拟“包含单词”——[class^="hidden"]会错杀class="hidden-block" -
[attr*=value]是子串匹配，灵活但易误伤，慎用于生产环境关键样式 - 多数现代框架生成的 class 名含哈希（如
Button__root___abc123），此时只能靠[class*="Button__root"]临时调试，不可长期依赖
父子选择器 > 和后代选择器 空格的区别很要命
.container > .item 只匹配 .container 的直接子元素；.container .item（空格）会穿透任意层级，只要在内部就行。这个差异在组件嵌套变深时极易引发意料外的样式污染。
比如 Modal 组件里用了 .modal .header，结果 Dialog 子组件也带 .header，就被意外覆盖了。
