跨浏览器问题主要源于伪类、伪元素及css特性支持差异，而非选择器语法本身；如:focus-visible、::placeholder需兼容写法，:has()等新特性需查can i use确认支持范围。
哪些 CSS 选择器在跨浏览器中实际会出问题
绝大多数标准 CSS 选择器（如 .class、#id、div p、ul > li）在现代浏览器中表现一致，根本不需要前缀。真正出问题的往往不是“选择器语法本身”，而是你用它去匹配的**属性、伪类或伪元素所依赖的底层特性尚未被某浏览器完全支持**。比如：:focus-visible 在 Safari 15.4 之前不支持，::placeholder 在旧版 Edge 中需要 ::-ms-input-placeholder，[type="date"]::-webkit-calendar-picker-indicator 这类 WebKit 专有伪元素只在 Chrome/Safari 有效。
什么时候必须加厂商前缀——不是看选择器，而是看它修饰的特性
前缀（如 -webkit-、-moz-）从来不是为选择器加的，而是为**CSS 属性值、伪类、伪元素或函数**加的。例如：
input:focus-visible {
outline: 2px solid #007aff;
}
/* Safari 15.3 及更早不识别 :focus-visible，需回退 */
input:focus:not(:focus-visible) {
outline: none;
}再比如占位符写法必须分写：
input::placeholder {
color: #999;
}
input::-webkit-input-placeholder { /* Chrome/Edge/Safari */
color: #999;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #999;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #999;
}- 前缀只对尚未进入正式标准或实现不统一的特性生效，不是“所有新东西都要加”
- Can I Use 上查
:has()会明确标出 Safari 15.4+ 原生支持，Chrome 105+ 支持，无需前缀；但若你在用dialog元素配合:modal，那目前（2024）它仍是实验性伪类，仅 Chromium 实现且需-webkit-modal - 自动添加前缀的工具（如 Autoprefixer）依赖你配置的目标浏览器范围（
browserslist），配错就可能漏加或乱加
兼容性测试不能只靠“看起来一样”
视觉一致 ≠ 行为一致。比如 :hover 在触摸设备上触发逻辑不同：iOS Safari 会在第一次点击后才激活 :hover 样式，且后续不会自动清除；Android Chrome 则可能根本不触发，除非启用 touch-action: manipulation 或监听 touchstart 模拟。这时光截图比对没用，得实机点按验证。
立即学习“前端免费学习笔记（深入）”；
- 真机测试优先于模拟器：iOS 的
:focus和:active状态持续时间、滚动时的伪类重置行为，跟桌面 Chrome 完全不同 - 关注可访问性影响：IE11 不支持
:focus-within，如果你用它来显示子菜单，键盘用户就卡住；得用 JavaScript 监听focusin事件做降级 - 检查计算样式（Computed tab）而非声明样式（Styles tab）：有些浏览器会把不识别的选择器整条规则丢弃，导致你以为的样式根本没有生效
最常被忽略的兼容性断点：选择器嵌套与作用域限制
CSS Nesting（& 语法）和 @scope 是较新的 W3C 特性，目前仅 Chromium 119+ 和 Safari 17.4+ 部分支持，Firefox 完全未实现。如果你写了：
@scope (.card) to (.card-header) {
& h2 { margin: 0; }
}这段代码在 Firefox 或旧版 Chrome 中会被整个忽略——不是报错，而是静默失效。更隐蔽的问题是，某些选择器组合在特定浏览器中解析失败，比如：
div:not([data-id="1"]):not([data-id="2"]) { ... }IE11 无法解析多个 :not() 连用，必须拆成两个规则或改用 JS 控制 class。
真正要盯住的，从来不是“这个选择器长什么样”，而是“它所依赖的规范阶段、浏览器实现粒度、以及运行环境是否允许它被解析和应用”。前缀只是表象，兼容性测试也不是点开几个浏览器截图就完事——它得覆盖设备交互路径、辅助技术链路、以及样式层与 DOM 层的耦合深度。
