Chrome 和 Firefox 支持但 Safari 不支持的选择器包括 :has()（Safari 15.4+ 才支持）、:is()/:where() 的复杂嵌套（如 :is(.a, .b):hover 在 Safari 16.4 前被忽略），以及部分伪类组合和属性选择器。
Chrome 和 Firefox 支持但 Safari 不支持的选择器
是的，浏览器对 CSS 选择器的支持确实存在差异，尤其在较新或实验性选择器上。Safari（尤其是旧版 macOS/iOS）常滞后于 Chrome 和 Firefox，比如 :has() 在 Safari 15.4+ 才开始支持，而 Chrome 105+、Firefox 110+ 更早启用。另一个典型是 :is() 和 :where() 的嵌套层级限制：Safari 16.4 之前不支持 :is(.a, .b):hover 中的伪类组合，会直接忽略整条规则。
实操建议：
- 用 caniuse.com 查具体选择器的覆盖版本，重点看 “iOS Safari” 列
- 避免在关键布局中依赖
:has()，它目前仍触发重排（性能敏感场景慎用） - 用
:is()替代长串重复前缀时，注意 Safari 15.2–16.3 对:is(:nth-child(2n))类写法有解析 bug，可改用:nth-child(even)直写
IE 完全不识别但现代浏览器已普及的选择器
IE11 及更早版本不支持 :focus-within、:not() 的复杂参数（如 :not(.a, .b)）、[attr~="val"] 等。这些在 Chrome/Firefox/Edge（Chromium）中早已稳定，但若项目还需兼容 IE，就必须规避。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
nav:has(> .active)，IE 直接跳过整条 CSS 规则，导致导航高亮失效 - 用
input:not([type="hidden"]):focus控制表单焦点样式，IE11 报语法错误并丢弃后续声明
替代方案：
-
:focus-within→ 改用 JavaScript 监听子元素focus事件并手动加 class -
:not(.a, .b)→ 拆成两条规则：.c { ... }和.d { ... }，或用 class 组合如.item:not(.disabled):not(.hidden)
伪类选择器在表单控件上的渲染差异
不同浏览器对原生表单元素（、）的伪类支持不一致。例如 input[type="checkbox"]:checked::before 在 Firefox 中可生效，但 Safari 默认禁用该伪元素的样式穿透；Chrome 允许自定义，但需配合 -webkit-appearance: none。
关键点：
-
::-webkit-scrollbar仅限 WebKit 内核（Chrome/Safari），Firefox 用scrollbar-width和scrollbar-color，IE 不支持任何滚动条样式 -
option:checked在 Safari 中无法选中后改变文字颜色，必须用 JS 动态操作selectedIndex+ class 模拟 - 所有浏览器都允许
:disabled，但:read-only在 Safari 14.1 之前对不生效
选择器优先级计算在各浏览器中是否一致
优先级（specificity）算法本身是 CSS 规范强制要求，Chrome、Firefox、Safari、Edge 均严格按 W3C 标准执行：内联样式 > ID > 类/属性/伪类 > 元素/伪元素。但“看起来不一致”的情况往往源于两个隐藏因素：
- 某些浏览器对无效选择器的容错不同：如
div::before:hover（伪元素不能接伪类）在 Chrome 中整条规则被丢弃，Firefox 却可能部分解析，导致样式意外生效 - CSSOM 解析顺序差异：当多个
@media或@supports嵌套中含相同选择器时，Safari 16.1 之前存在缓存判定 bug，可能导致媒体查询内规则未正确应用 - 动态插入的 style 标签中，若含语法错误（如漏掉
}），WebKit 引擎会截断后续所有规则，而 Blink 有时继续解析
调试建议：遇到“明明写了却没生效”，先用浏览器 DevTools 的 Styles 面板确认该规则是否出现在 computed 样式中 —— 如果连列表都没出现，大概率是选择器语法错误或被浏览器静默丢弃了。
真正棘手的不是“哪个浏览器不支持”，而是“同一段代码在不同浏览器里被解析成不同东西”。多看 DevTools 里的 actual applied rules，少猜。
