CSS选择器本身语法正确，但实际生效取决于所修饰的伪类、伪元素或属性是否被浏览器内核支持；如:focus-visible、::placeholder、:has()及专有伪元素等在旧版Safari、Edge、Firefox、IE中不识别，厂商前缀只能加在属性/伪类上而非选择器本身，IE6–8对:nth-child、:not、[attr=value]等直接不解析。
不一致。绝大多数标准选择器（如 .class、#id、div p）语法本身没问题，但匹配结果是否生效，取决于它所修饰的伪类、伪元素或属性是否被当前内核真正支持。
哪些选择器实际会因内核差异失效
真正出问题的不是选择器写法，而是你用它去控制的特性在某个内核里压根没实现：
-
:focus-visible在 Safari 15.4 之前完全不识别，写了也白写 -
::placeholder在旧版 Edge 需要::-ms-input-placeholder，WebKit 内核则要::-webkit-input-placeholder -
:has()在 Safari 15.4+ 和 Chrome 105+ 原生支持，但 IE 和 Firefox 112 以下版本根本不认 -
[type="date"]::-webkit-calendar-picker-indicator这种专有伪元素只在 Blink/WebKit 下有效，Gecko 和 Trident 直接忽略整条规则
为什么加前缀对选择器本身没用
厂商前缀（-webkit-、-moz-）从来不是加在选择器上的，而是加在它后面声明的属性、伪类或伪元素上：
- 错误写法：
-webkit-.my-button { ... }—— 选择器不能加前缀 - 正确写法：
.my-button::-webkit-input-placeholder { color: #999; } - Autoprefixer 也不会给
nav > ul > li加前缀，它只处理display: flex或backdrop-filter这类属性
IE6–8 的选择器兼容性雷区
这些老内核对选择器语法支持极弱，不是“显示不一样”，而是“直接不解析”：
立即学习“前端免费学习笔记（深入）”；
-
:nth-child(n)、:not()、:checked在 IE8 及以下全都不支持 -
h1 ~ ul（通用兄弟选择器）IE7 不认，IE8 才开始支持 -
[attr=value]属性选择器 IE6 完全无视，IE7 仅部分支持 - 如果项目必须兼容 IE8，就别用这些选择器，改用 class 降级：比如把
li:first-child换成li.first-item
验证选择器是否真被内核解析了
光看页面“看起来像”没用，得确认浏览器是否真的把这条规则放进 CSSOM：
- 打开开发者工具 → Elements 面板 → 找到目标元素 → 看 Styles 标签页里，对应规则是否灰掉（表示未匹配）或根本没出现（表示被忽略）
- 在 Safari 中检查
gap，即使写了display: flex，Safari 13.0 也会直接跳过整条gap: 12px规则，连 warning 都不报 - 用
getComputedStyle(el).getPropertyValue('gap')返回空字符串，比看样式面板更可靠
最麻烦的不是写错，而是某条规则在某个内核里根本没进解析队列——它被当成无效语法静默丢弃了，连 debug 都找不到痕迹。
