:is()嵌套写法需Chrome100+/Firefox100+/Safari15.4+支持，旧版会忽略整条规则；嵌套仅限一层，不可与:not()混用，不支持伪元素，权重取内部最高值，工具链可能误降级，推荐用于同维度状态组合。
伪类 :is() 嵌套写法不生效？检查浏览器兼容性与语法层级
Chrome 100+、Firefox 100+、Safari 15.4+ 才完整支持 :is() 内部嵌套选择器（比如 :is(h1, .title):hover），旧版本会直接忽略整条规则。别急着改逻辑，先查 caniuse.com/:is 看目标环境是否兜底。
常见错误现象：:is(.btn, .link):is(:hover, :focus) 在 Safari 15.3 下完全不触发，因为嵌套 :is() 不被识别；必须拆成 :is(.btn:hover, .btn:focus, .link:hover, .link:focus) 或降级用逗号分隔。
- 嵌套层级仅限一层：支持
:is(.a, .b):hover，但不支持:is(:is(.a, .b):hover) - 不能和
:not()混用在同一个:is()里，:is(.x:not(.y))合法，:is(.x, :not(.y))会报解析错误 - 伪元素如
::before不能出现在:is()内部，:is(.a::before)是无效语法
:is() 替代长重复选择器时，注意权重计算陷阱
:is() 不改变选择器优先级，它取括号内所有选择器的最高权重。比如 :is(.card .title, h2) 的权重等同于 .card .title（0,2,0），不是简单相加或取平均。
这意味着你用 :is() “简化”写法后，可能意外覆盖了原本更低权的样式，尤其在组件库或 CSS-in-JS 场景下容易踩坑。
立即学习“前端免费学习笔记（深入）”；
- 对比：
.section h2（0,1,1）vs:is(.section h2, .post h2)（仍是 0,1,1）——权重没变 - 但
:is(.featured h2, h2)权重是 0,1,1（取高者），而单独写h2是 0,0,1，前者会更强 - 如果想保持低权，别用
:is()包裹高权选择器；宁可多写几行，也别靠它“假装轻量”
和预处理器（如 Sass）混用时，:is() 别提前被编译掉
Sass 1.55+ 才原生理解 :is() 并跳过其内部解析；旧版会把 :is(.a, .b) 当作未知伪类，尝试展开或报错。更危险的是，有些 PostCSS 插件（如 postcss-preset-env）默认对 :is() 做降级转换，把现代写法转成冗长逗号列表，反而放大体积。
使用场景：你在 _mixins.scss 里封装了一个按钮样式，里面用了 :is()，结果构建后发现生成了 12 行重复选择器——大概率是工具链在“好心帮忙”。
- 确认
postcss-preset-env配置中stage: 3且features显式关闭is-selector降级 - Sass 用户升级到
sass@1.55.0+，并避免在@if或@each中动态拼接:is()字符串 - Webpack/Vite 项目中，检查
css-loader是否启用了importLoaders连环处理，导致多次解析
真正省代码的地方：配合属性选择器和状态组合
单写 :is([data-size="sm"], [data-size="lg"]) 没啥意义，但和状态连用就显效：:is(button, [type="submit"]):is(:disabled, [aria-busy="true"]) 一行顶四行，且语义清晰。
这种写法在表单控件、图标按钮、响应式文本等场景最实用，关键是括号内得是「同一维度的变体」，否则可读性反降。
- 推荐模式：
:is([role="button"], button, a[onclick])（行为一致的可点击元素） - 避免模式：
:is(.header, [data-modal], .tooltip)——类型、用途、结构都不同，后期维护难定位 - 性能影响极小：现代浏览器已对
:is()做过优化，比手写 10+ 逗号选择器更快解析
最易被忽略的一点：:is() 内部不支持 CSS 变量计算，:is(.a#{--size}, .b) 这种插值在 Sass 里会报错，得用 #{...} 外包整个 :is() 块，而不是往里面塞变量。
