IE8及以下不支持:nth-child()、:not()、:last-child、:first-of-type、[type="submit"]、h1+p、h1~ul；IE6仅支持基础选择器和a:hover；IE7开始支持:first-child和部分属性选择器；IE8支持:focus（表单元素）、:checked（有限）、E+F，但不支持E~F、:nth-系列、:not()。
哪些 CSS 选择器在 IE8 及更老浏览器里根本不能用？
直接说结论：:nth-child()、:not()、:last-child、:first-of-type、[type="submit"]（属性选择器）、h1 + p（相邻兄弟）、h1 ~ ul（通用兄弟）——这些在 IE8 及以下**全部不支持**。IE6 连 :hover 都只认 a 标签，.nav:hover 这种写法在 IE6 下完全无效。
- IE6：只支持基础选择器（
#id、.class、div、div p），伪类仅限a:hover，不支持任何属性选择器 - IE7：开始支持
:first-child和部分属性选择器（如[href]），但大小写敏感（[class="btn"]不匹配class="Btn"） - IE8：支持
:focus（仅表单元素）、:checked（有限）、E+F，但依然不支持E~F、:nth-系列、:not()
老项目要兼容 IE8，必须守住的「安全选择器清单」
不是“能用就行”，而是“用了就一定稳”。只要严格限定在这范围内，就能绕过绝大多数兼容性报错或样式失效：
- ID 选择器：
#header、#main-nav - 类选择器：
.btn、.is-active（注意：IE6 不支持双类连写.btn.primary，得拆成两个规则） - 标签 + 后代组合：
ul li a、form input[type="text"]—— 注意！input[type="text"]在 IE8 是支持的，但 IE7 及以下不支持，所以如果目标含 IE7，就得改成input.text并手动加 class - 群组选择器：
h1, h2, h3 { margin: 0; }所有版本都 OK -
伪元素
:before/:after：IE8 支持，但必须用单冒号语法:before（不是::before），且content值不能是空字符串或纯空格
遇到不兼容选择器时，怎么低成本替换？
别急着写 JS 动态加 class，先看能不能用已有结构“借力”：
- 想用
li:nth-child(2n)→ 改用li.even，后端或模板层输出 class，或用 jQuery 补充：$('li:even').addClass('even'); - 想用
input:not([type="hidden"])→ 改成显式列举：input[type="text"], input[type="email"], input[type="password"] - 想用
section + aside→ 改用 class：.section-main + .aside-related，并确保 HTML 中确实带这两个 class - 需要
:focus视觉反馈但要兼容 IE7？用 JS 模拟：document.addEventListener('focusin', e => { if (e.target.tagName === 'INPUT') e.target.className += ' focused'; });，再写.focused { outline: 2px solid #007cba; }
千万别信“自动兼容工具”能解决选择器问题
像 Autoprefixer 这类工具只处理 CSS 属性前缀（-webkit-transition），**完全不碰选择器**。PostCSS 插件如 postcss-selector-not 或 postcss-pseudo-classes 虽能转译部分伪类，但会把 :not(.disabled) 编译成冗长的 class 列表，在复杂 DOM 下极易出错，且无法覆盖 :nth-child 这类逻辑型选择器。
真正可靠的路径只有一条：明确锁定最低支持版本（比如 IE8），然后把选择器白名单钉死在项目规范里，CI 流程中用 stylelint 配合自定义 rule 拦截高危选择器（例如禁止出现 :nth-、:not(、~、^=）。否则上线后用户一开 IE8，页面就只剩默认样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
