ie8及以下不解析:checked、:not()、:nth-child()等伪类，整条css规则被跳过；必须用js模拟:checked状态、链式重写:not()、单冒号书写:before/:after，并处理radio互斥与初始化。
IE8及以下版本压根不解析 :checked、:not()、:nth-child() 等伪类选择器，CSS规则会被整条跳过——这不是写法错误，是引擎没实现，纯CSS无解。
为什么 :checked 在 IE8 里完全不生效？
IE8 的 CSS 解析器根本没实现 :checked 语法，遇到 input:checked 这种规则直接丢弃，连尝试匹配都不会做。你改选择器权重、加 !important、换写法都没用。
实操建议：
- 必须用 JS 模拟状态：监听
change事件，手动给元素加is-checked类 - 初始化时就得检查
el.checked属性并补上类名，否则首屏就错乱 - radio 组要额外处理互斥：某个被勾选后，遍历同
name的所有 radio，对非当前项调用r.classList.remove('is-checked') - 别监听
click——键盘空格键也能触发选中，change才是语义正确的事件
如何安全降级 :not() 写法？
IE 全系列、Safari ≤15.4、Chrome ≤38 都不支持 :not()，而且是静默丢弃整条规则（DevTools 里显示为划掉的样式，不是未匹配）。
实操建议：
- 多参数写法
:not(.a, .b)必须手动拆成链式:not(.a):not(.b)，这是唯一能覆盖 IE8+ 的方案 - 别依赖 PostCSS 自动转译：默认配置下
postcss-preset-env不展开多参数:not，得显式开notParens: true - IE8 及以下必须彻底移除
:not()：比如input:not([type="hidden"])得拆成input[type="text"], input[type="email"], input[type="password"] - 逻辑反转更可靠：把
.card:not(.card--disabled) .btn改成两条：.card .btn+.card--disabled .btn { display: none; }
::before 和 ::after 在 IE8 怎么写才有效？
IE8 只认单冒号 :before 和 :after，遇到双冒号 ::before 就整条规则忽略；IE7 连单冒号都不支持，直接静默失效。
实操建议：
- 兼容 IE8：只写
:before，别用::before；Sass/Less 编译后要检查输出，旧版sass-loader默认出双冒号，需配outputStyle: 'compressed'或插件强制降级 - 兼容 IE9–11：必须并列写
:before, ::before，且:before在前，否则 IE8 读到第一个::before就停，整条失效 - IE8 的
content值受限：不能用url()、字体图标 Unicode（如\e900）、\A换行符；安全做法是用background-image+display: inline-block模拟 - IE7 及以下：伪元素功能必须退化，用
[class*="icon-"]属性选择器配合真实 DOM 节点，或 JS 检测getComputedStyle(el, ':before')返回null后动态插入
真正麻烦的不是写法本身，而是这些特性在低版本里是“全有或全无”——漏掉一个 :before 替换、少处理一次 radio 互斥、忘了初始化类名，对应模块在 IE8 里就彻底空白或错乱，且控制台零报错，排查成本远高于预防成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
