IE8及以下仅支持后代选择器、[attr$=val]、[attr^=val]、[attr*=val]四个CSS3选择器，其余如:nth-child、:not()、:nth-of-type等均被静默丢弃，且整条CSS规则失效。
CSS3选择器在IE模式下失效，不是“没加载”，而是被浏览器直接跳过解析——IE8及以下压根不认识这些语法，连报错都不会有。
IE8 及以下根本不支持大部分 CSS3 选择器
IE8 只认有限的几个选择器：后代选择器（.container .btn）、属性选择器中的 [attr$=val]、[attr^=val]、[attr*=val]。像 :nth-child(2)、:not(.active)、.card:nth-of-type(3)、input[type="email"] 这些，IE8 会整条规则静默丢弃。
- 哪怕你写了
ul > li（子选择器），IE6–IE8 也完全不识别，得换成ul li -
:first-child是 CSS2.1 的，IE7+ 支持；但:last-child、:only-child是 CSS3 的，IE8 不支持 - 伪元素如
::before在 IE8 中必须写成单冒号:before，且仅对已知 HTML 元素生效（自定义标签无效）
IE9–IE11 表面支持，实则陷阱密集
IE9 开始支持部分 CSS3 选择器，但兼容性极不统一：
-
:not()在 IE9–IE11 中只支持单参数形式（如:not(.disabled)），:not(.a, .b)或:not(.a.b)会被整条忽略 -
:nth-of-type()和:nth-child()在 IE9+ 基本可用，但:nth-last-child()等较新变体仍不可靠 - 属性选择器如
[type="range"]可用，但[type~="button"]（空格分隔值匹配）在 IE9 中不支持 - 媒体查询虽可用，但若页面未声明
<!DOCTYPE html>或<meta http-equiv="X-UA-Compatible" content="IE=edge">，IE10/11 会降级到 IE7 文档模式，所有 CSS3 选择器全失效
构建工具不会自动降级选择器，别信“写了就安全”
PostCSS、Autoprefixer、Less/Sass 编译器默认都不处理选择器兼容性问题：
立即学习“前端免费学习笔记（深入）”；
-
postcss-preset-env默认不展开:not(.a, .b)，必须手动配notParens: true才能转成:not(.a):not(.b) - Less/Sass 中写
.btn:not(.primary):hover，编译后还是原样输出，IE8 看不见这条规则 - SCSS 的
@if $ie8条件编译只能控制是否生成某段 CSS，不能把:nth-child自动替换成 class-based 逻辑 - 用
caniuse查兼容性时，注意看 “Notes” 栏——比如:not()在 Safari ≤15.4 下多参数写法是 “Invalid CSS”，不是“部分支持”
真正能落地的兼容策略只有两条
别指望 polyfill 或运行时 JS 补救选择器匹配，那是在 DOM 渲染后才执行，样式早已错过渲染时机：
- 对 IE8 及以下：彻底不用 CSS3 选择器，改用 class 控制，例如把
input:not([type="hidden"])拆成input[type="text"], input[type="email"], input[type="password"] - 对 IE9–IE11：坚持单参数
:not()、避免:not(.a.b)、禁用多参数或复合类写法；用开发者工具 Elements 面板确认规则是否被划掉（strikethrough），而不是只看元素有没有变色 - 验证环节必须查最终生成的 CSS 文件，而不是源码——SCSS 写得再“高级”，输出里出现
:is()或:has()就等于对 IE 宣告无效
最常被忽略的点：IE 模式下失效的从来不是“某个选择器”，而是整个规则块。一个拼错的 backgroud-color 或漏掉的右括号，会让其后所有选择器都失效——而你在 DevTools 里根本看不到它们。
