ie8仅支持css2.1选择器及少量css3子集，:nth-child、e~f、[attr^=val]等完全失效，须用:first-child、e+f、[attr=val]等降级写法并统一单冒号伪元素语法。
老项目该用 CSS2.1 还是 CSS3 选择器，不取决于“新旧偏好”，而取决于你能否控制目标浏览器的版本范围——如果 IE8 及更早版本仍需支持，:nth-child、~、[attr^="value"] 这类 CSS3 选择器就得禁用。
哪些 CSS3 选择器在 IE8 下直接失效
IE8 是 CSS2.1 的分水岭。它完全不识别以下常见 CSS3 选择器，使用即无效果（不是报错，是静默忽略）：
-
:nth-child(n)、:first-of-type等结构伪类 -
E ~ F（通用兄弟选择器），只认E + F（相邻兄弟） -
[attr^="val"]、[attr$="val"]、[attr*="val"]这类属性选择器子集 -
::before和::after（双冒号语法），IE8 只支持单冒号:before/:after
兼容性妥协时的替代写法
当必须支持 IE8，又想实现类似 CSS3 的功能，得靠降级策略，而不是硬上：
- 用
.first、.last、.odd等 class 手动标记，代替:first-child或:nth-child(2n) - 用
E + F替代E ~ F，但注意它只选中“紧挨着”的下一个同级元素，中间插个<p></p>就断了 - 属性选择器退回到
E[attr]或E[attr="val"]，这两个 IE8 支持；避免用~=、|=等扩展语法 - 伪元素统一用单冒号写法：
:before而非::before，否则 IE8 不渲染
如何快速验证现有选择器是否安全
别靠记忆，用工具或简单规则筛一遍：
- 打开项目 CSS 文件，全局搜索
:，看是否有:nth-、:not(、:target、:focus-within等明显 CSS3 伪类 - 搜索
~和>：前者 IE8 不支持，后者（子选择器）IE7+ 已支持，可放心用 - 检查是否混用了双冒号伪元素（
::placeholder）——老项目若还跑在 IE10 以下，一律改回单冒号 - 用 caniuse.com 查具体选择器，输入如
css-sel3或直接搜:nth-child，看 “IE” 列是否标红
真正容易被忽略的点是：CSS 选择器兼容性不是“全有或全无”，而是按具体语法逐条生效。一个文件里混用 CSS2.1 和 CSS3 写法没问题，只要执行环境能解析那一行——所以关键不是“选哪个标准”，而是明确你的最低支持边界，然后逐个选择器过筛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
