CSS样式不生效主因是选择器优先级误判、空格与>混淆、:nth-child/:nth-of-type逻辑错用、属性值未加引号；应善用开发者工具Computed/Styles面板排查，统一BEM命名并控制选择器深度。
选择器优先级算错导致样式不生效
这是最常被忽视的问题：明明写了样式，却没生效，往往不是语法错，而是 !important 没加、或者两个规则冲突时浏览器按优先级“默默”选了另一个。CSS 优先级是按「内联 > ID > 类/属性/伪类 > 标签/伪元素」逐位比较的，不是简单数个数。
-
#header .nav a:hover和.menu-link.active对比：前者有 1 个 ID + 2 个类（实际是 1 ID + 1 类 + 1 标签 + 1 伪类），后者是 2 个类 —— 前者更高，哪怕后者写在后面也不会覆盖 - 用浏览器开发者工具看「Computed」面板里某条样式被划掉的原因，点开左侧「Styles」就能看到具体哪条规则胜出
- 避免靠堆砌
!important解决问题；更稳妥的是统一用 BEM 命名，控制选择器深度（比如不超过 3 层）
空格和 > 符号混用造成意外匹配
初学者容易把后代选择器（空格）和子选择器（>）当成一回事，结果选中了不该选的元素。一个空格之差，DOM 范围可能扩大几倍。
-
.card .title匹配所有嵌套在.card内任意深度的.title；而.card > .title只匹配直接子元素 - 当组件结构动态渲染（如 React 中
Portal或插槽内容）时，>容易失效，因父容器里可能插入了中间 wrapper 节点 - 检查是否误用了空格：比如想写
input[type="text"]:focus，却写成input [type="text"]:focus（多了空格 → 变成找 input 后代中带 type=text 的元素）
:nth-child 和 :nth-of-type 逻辑混淆
这两个伪类都按位置筛选，但计算基准完全不同：:nth-child 看的是父元素下所有兄弟节点的顺序，:nth-of-type 只看同类型（即同标签名）的兄弟节点。
.list div:nth-child(2) { background: red; }
.list div:nth-of-type(2) { background: blue; }如果 HTML 是：
立即学习“前端免费学习笔记（深入）”；
<div class="list"> <p>intro</p> <div>first</div> <span>note</span> <div>second</div> </div>
那么 div:nth-child(2) 会命中第一个 <div>（它是父元素第 2 个子节点），而 div:nth-of-type(2) 会命中第二个 <div>（它是父元素下第 2 个 div 元素）。多数时候你要的是后者。
属性选择器值未加引号引发解析失败
当属性值含空格、括号、点号、冒号等特殊字符时，不加引号会导致 CSS 解析中断或匹配失败，但浏览器通常不报错，只静默忽略整条规则。
- 错误写法：
a[href=/path/to/page?tab=home&sort=asc]——&被当作 CSS 语法分隔符，后续内容失效 - 正确写法：
a[href="/path/to/page?tab=home&sort=asc"]（注意 HTML 中&要写成&，CSS 里引号内保持原样） - 即使值看起来“安全”，也建议统一加双引号，避免未来改值时踩坑（比如从
data-status="active"改成data-status="pending review"）
真实项目里，这些问题往往叠加出现：比如用 div:nth-child 配合动态插入的 svg 元素，再套上没引号的 [data-id=123]，最后还被一个更宽泛的 .container * { margin: 0 } 覆盖 —— 调试时得一层层剥开看。别依赖“应该生效”，要信开发者工具里那个被划掉的样式线。
