ie8及更早版本直接忽略不支持的css选择器，整条规则被解析器跳过；安全选择器包括id、类、后代组合、群组选择器和单冒号伪元素，需规避属性选择器、兄弟选择器、:nth-*、:not()、:is()、:where()、:has()等现代语法。
IE8 及更早版本直接忽略的 CSS 选择器
这些选择器在 IE8 及以下版本里不是“表现异常”，而是压根不识别——整条 CSS 规则会被浏览器 parser 直接跳过，连带声明块一起丢弃，DevTools 里都看不到它被加载。
-
:nth-child()、:nth-of-type()、:last-child、:first-of-type：IE8 不支持，IE7 仅部分支持:first-child -
:not()：IE8 完全不支持；哪怕写成:not(.disabled)，整条规则失效 - 属性选择器如
[type="submit"]、[href^="https"]：IE7 开始支持部分（大小写敏感），IE6 完全不支持 -
h1 + p（相邻兄弟）、h1 ~ ul（通用兄弟）：IE8 支持前者，但不支持后者；IE7 及以下两者都不支持
:is() 和 :where() 在 Safari ≤15.3 中为何“看不见”
这不是渲染问题，是语法解析失败。Safari ≤15.3 的 CSS 引擎遇到 :is() 或 :where() 时，根本不会进入样式计算流程——它卡在 parse 阶段，把整个选择器序列判为非法 token，整条规则静默丢弃。
-
@supports selector(:is(*))在 iOS 15.2 及更早版本可能返回true，但实际仍不生效，不可信 - 错误写法如
:is(.btn, .btn-lg, )（末尾多逗号）或:where(.a::before)（含伪元素）会触发同样行为 - 控制台通常不报错，也不标出具体哪一行，只能靠排除法定位
:has() 为什么在 Firefox 120 / Safari 15.3 里完全没反应
因为这些版本压根没实现该语法。CSS 解析器不认识 :has()，遇到 form:has(input:invalid) 这类写法，直接跳过整条规则（包括大括号里的所有声明）。
-
CSS.supports('selector(:has(*))')返回false，但某些构建工具（如 cssnano）会直接删掉整条规则，连降级机会都不留 - 不能靠 class 切换“模拟”：JS 动态加类有微小延迟，
el.querySelector('.child.active')不稳定，应改用el.querySelector('.child')?.classList.contains('active') - 父元素必须有稳定标识（如
class="form-group"或id="login-form"），不能依赖div:nth-child(2)这类结构脆弱的选择器
老项目守住兼容底线的安全选择器清单
不是“能用就行”，而是“用了就一定稳”。只要严格限定在这范围内，就能绕过绝大多数解析失败或样式失效。
- ID 选择器：
#header、#main-nav—— 所有版本支持 - 类选择器：
.btn、.is-active—— 注意 IE6 不支持双类连写（.btn.primary必须拆成两个规则） - 后代组合：
ul li a、form input—— 全支持；但input[type="text"]在 IE7 及以下不支持，需改用input.text并手动加 class - 群组选择器：
h1, h2, h3 { margin: 0; }—— 所有版本 OK - 伪元素：
:before（单冒号）—— IE8 支持，但content值不能是空字符串或纯空格
:is(.btn, #submit) 权重取最高项（#submit 的 0-1-0），但手写成 .btn, #submit 后，两者权重不同，#submit 会压倒 .btn —— 这种隐性覆盖，在视觉回归测试里极难发现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
