is() 伪类怎么写才不会被忽略
浏览器对 :is() 的支持从 Chrome 88、Firefox 90、Safari 15.4 开始稳定，但旧版本会直接丢弃整条规则（不是忽略伪类，而是整个选择器失效）。如果你的项目还要兼容 Safari 15.3 或更早，:is() 不能单独用——它会让整条 CSS 规则被跳过。
常见错误现象：button:is(:hover, :focus-visible) { outline: 2px solid blue; } 在 Safari 15.3 下完全不生效，且控制台无提示。
- 必须搭配回退写法：先写一遍传统逗号分隔的选择器，再覆盖一层
:is() - 不要在
:is()里混用不同层级的选择器（比如:is(.btn, div > span)），部分浏览器会静默失败 -
:is()不提升 specificity，这点和:where()一样，但和手动写逗号分隔等价
替换长链选择器时为什么反而更难维护
有人用 :is() 把 .card-title, .post-title, .section-title 压成 :is(.card-title, .post-title, .section-title)，看起来简洁了，但实际增加了认知负担：你得记住这三个类名语义是否真的一致，样式是否真的该完全统一。
使用场景很明确：只适用于「视觉表现完全一致 + 语义上可归为同一抽象层」的元素。比如表单控件的状态：input:is(:disabled, [readonly], [aria-readonly="true"]) { opacity: 0.6; } 是合理用法。
立即学习“前端免费学习笔记（深入）”；
- 别用
:is()合并本该有差异的样式，比如按钮变灰逻辑分散在多个组件里，强行合并会导致后续加[data-loading]状态时难以插入手动覆盖 - VS Code 或 WebStorm 默认不校验
:is()内部选择器是否存在，错字（如.btn-prmary）不会报错，运行时也静默失效 - 构建工具如 PostCSS 的
autoprefixer默认不处理:is()，也不会为你补兼容写法
和 :where() 混用时 specificity 容易误判
:is() 和 :where() 都能收编多个选择器，但它们对权重的影响完全不同：:is(.a, .b) 的 specificity 取内部最高项（比如 .a 是 0,1,0，那整个就是 0,1,0）；而 :where(.a, .b) 永远是 0,0,0。
典型踩坑：你写了 div:is(.error, .warning) { color: red; }，以为它和 div.error 权重一样，结果发现被 span.error 覆盖了——因为 span.error 是 0,1,0，和 div:is(.error, .warning) 权重相等，后者声明顺序靠后才赢。
- 调试时看 computed styles 里的 “specificity” 数值，别凭感觉猜
- 想彻底规避权重干扰，就用
:where()，但它不能替代:is()的“真实匹配”行为（比如:where(:hover)无法触发悬停效果） - 嵌套使用如
:is(.a, :is(.b, .c))不增加额外复杂度，但可读性骤降，不建议
伪类组合中 :is() 的括号边界必须清晰
:is() 只接受简单选择器列表，不能包含组合符（空格、>、+ 等）。写成 :is(.btn:hover, .link:focus) 没问题，但 :is(.menu > li, .nav a) 是无效语法，整条规则失效。
容易被忽略的地方：伪类本身也是选择器的一部分，:is(:not(.disabled):hover) 是合法的，但 :is(:not(.disabled) :hover)（中间多了一个空格）就会让整个 :is() 失效。
- 浏览器解析到非法内容时，不报错也不警告，只是跳过这条规则
- VS Code 的 CSS 语言服务对这类错误识别率很低，需靠人工检查括号配对和空格位置
- 如果需要表达“父级 hover 时子元素变色”，老老实实用
.parent:hover .child，别硬塞进:is()
真正省事的地方不在“写得短”，而在“改得准”——当你需要批量调整某几类状态样式时，:is() 让你只改一处。但前提是，你清楚哪些状态确实该被归为一类，以及你的用户浏览器是否真的认它。
