IE8及更早版本遇不支持选择器会整条忽略，如:nth-child、[data-id]或:not()，导致同组合法选择器（如.fallback）也失效；CSS规范要求解析器遇语法错误或未知选择器必须放弃整条规则，不可部分应用。
IE8及更早版本遇到不支持的选择器会整条忽略
这是最典型的“一错全废”场景。IE8不认识 :nth-child、[data-id] 或 :not()，只要选择器组里混进一个它看不懂的，整条规则（包括后面完全合法的 .fallback）都会被丢弃，连警告都不给。
常见高危组合：
-
div:nth-of-type(2), .fallback→ IE8 里.fallback样式也丢了 -
input[type="text"], textarea→input[type="text"]失效导致整条失效
不是浏览器“偷懒”，而是 CSS 规范明确要求：解析器在遇到语法错误或未知选择器时，必须放弃整条规则，不能部分应用。
逗号只是分组，不改变各选择器独立性
写成 h1, p, .title { color: red; }，浏览器实际是分别执行三次匹配：查有没有 h1、有没有 p、有没有 .title。但前提是这三者都得是合法选择器。
一旦其中某个写错，比如：
-
h1, p., .title（p.是无效语法）→ 整条规则被当作非法 CSS 忽略 -
nav > ul, footer::before（少了个}在前面）→ 后续所有规则可能连锁失效
注意：空格不影响匹配，但中文逗号 ， 是致命错误，整条直接消失，DevTools 里根本看不到这条规则。
Less/Sass 编译阶段就可能提前报错
预处理器对语法更敏感。比如 Less 中写 & :hover（& 后多空格），编译后变成 .btn :hover，这不是运行时失效，而是从源头生成了错误选择器——它本身合法，但语义已变，导致你以为写了 hover 样式，其实绑定到了子元素上。
更隐蔽的是嵌套中误用 &：
-
.btn { &:not(:disabled) { ... } }✅ 合法 -
.btn { :not(&:disabled) { ... } }❌ 编译失败，因为&不能塞进函数参数
这类错误不会等到浏览器渲染才暴露，而是在构建阶段就中断，或静默产出无效 CSS。
开发者工具里看不到规则，往往就是“已被丢弃”
当你在 Elements 面板选中元素，却在 Styles 侧边栏完全找不到自己写的那条规则，第一反应不该是“优先级不够”，而是检查它是否根本没进浏览器解析流程。
排查步骤：
- 打开 DevTools 的 Styles 面板，搜索你的选择器文本，看是否出现（哪怕被划掉）
- 没出现 → 打开 Sources 面板，确认 CSS 文件加载成功且内容完整
- 文件存在但规则缺失 → 回头检查选择器组里是否有拼写错误、中文符号、或旧浏览器不支持的特性
真正棘手的不是样式被覆盖，而是规则压根没活过解析关——它连参与优先级计算的资格都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
