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 这类逻辑型选择器。
本程序源码为asp与acc编写,并没有花哨的界面与繁琐的功能,维护简单方便,只要你有一些点点asp的基础,二次开发易如反掌。 1.功能包括产品,新闻,留言簿,招聘,下载,...是大部分中小型的企业建站的首选。本程序是免费开源,只为大家学习之用。如果用于商业,版权问题概不负责。1.采用asp+access更加适合中小企业的网站模式。 2.网站页面div+css兼容目前所有主流浏览器,ie6+,Ch
立即学习“前端免费学习笔记(深入)”;
真正可靠的路径只有一条:明确锁定最低支持版本(比如 IE8),然后把选择器白名单钉死在项目规范里,CI 流程中用 stylelint 配合自定义 rule 拦截高危选择器(例如禁止出现 :nth-、:not(、~、^=)。否则上线后用户一开 IE8,页面就只剩默认样式。









