17370845950

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，页面就只剩默认样式。