在调试页面样式时，不少人都遇到过这样的怪事：明明通过JavaScript给元素加上了类名，开发者工具里也能看到这个类已经挂在DOM节点上，可对应的CSS规则就是一条都没应用。折腾半天后发现，问题往往出在CSS选择器本身，尤其是嵌套选择器与并列选择器混淆使用的时候。.parent .child和.parent.child看起来只差一个空格，语义却完全不同，写错一个字符，样式就会悄无声息地失效。
一个空格引发的失效：两种选择器的本质区别
先看两段经常被混用的写法：
/* 写法一：嵌套选择器（后代选择器） */
.parent .child {
color: red;
}
/* 写法二：并列选择器（复合选择器） */
.parent.child {
color: red;
}写法一中的空格表示后代关系，它匹配的是所有位于.parent元素内部、且类名为child的元素。注意这里是后代而不仅是子元素，中间隔了多少层都可以命中。而写法二没有空格，表示同一元素同时具备两个类，即匹配class="parent child"这样的节点，两个类名必须落在同一个元素上才生效。
理解了这一点，很多失效场景就一目了然了。假设你的HTML结构是<div class="parent"><div class="child"></div></div>，此时写法一可以命中内部的child，写法二则匹配不到任何元素，因为没有任何一个节点同时拥有这两个类。反过来，如果元素本身是<div class="parent child"></div>，写法二能命中，写法一反而失效了，除非它的某个祖先恰好有parent类。
动态添加类名时的典型踩坑场景
动态样式失效最常见的场景是交互反馈类需求。比如点击按钮给某个卡片添加一个active类，希望它高亮：
/* 期望命中当前这个既有 card 又有 active 的元素 */
.card.active {
border-color: #1890ff;
box-shadow: 0 0 8px rgba(24, 144, 255, 0.5);
}
<div class="card" id="item1">卡片一</div> <div class="card" id="item2">卡片二</div>
// JavaScript 动态添加类名
document.getElementById('item1').classList.add('active');这段代码是能正常工作的，因为card和active最终确实落在同一个div上。但很多人手一滑写成.card .active，含义立刻变成匹配card内部具有active类的子元素，而active类加在了card自己身上，自然一条规则都不会命中。控制台不会报任何错误，CSS匹配失败是静默的，这正是它难以排查的原因。
另一个坑出现在组件库或框架模板里。有些组件渲染出来的结构是嵌套的，你给外层容器加了自定义类，CSS却写成并列形式，结果外层类和内部目标类分别在不同层级的节点上，匹配失败。反过来，使用了CSS Modules或预处理器嵌套语法时，稍不注意缩进和&符号的用法，编译出来的选择器也可能从并列悄悄变成后代关系：
/* SCSS 嵌套写法 */
.card {
&.active { color: red; } /* 编译为 .card.active，并列 */
.active { color: blue; } /* 编译为 .card .active，后代 */
}可以看到，带不带&编译结果完全不同，这种差异在维护别人的样式代码时尤其要留心。
排查样式失效的实用思路与优先级问题
遇到类名加了但样式不动的情况，建议按固定顺序排查。第一步，在开发者工具的Elements面板选中目标元素，查看右侧Styles面板中该类对应的规则是否出现。如果规则压根没出现，说明是选择器匹配问题，回到HTML结构上核对类名的层级关系；如果规则出现了但被划掉，则是优先级或覆盖问题。
第二步，确认是否存在优先级压制。并列选择器.parent.child的优先级是两个类相加（0,2,0），高于单个类选择器（0,1,0），但低于内联样式和!important声明。如果框架或第三方库的样式优先级更高，即使你的选择器匹配成功也可能被覆盖。此时可以在Styles面板看到被划掉的规则及其来源文件，判断该提升优先级还是调整加载顺序。
第三步，注意JavaScript操作的时机。如果脚本在DOM渲染完成前执行，classList.add可能作用于一个即将被替换的节点，或者类名加上了但随后被框架的虚拟DOM diff逻辑移除。这类问题的特征是元素一开始有高亮闪一下又消失，排查时要检查类名是否在渲染后被覆盖回去了。
总结来说，嵌套选择器描述的是元素之间的层级关系，并列选择器描述的是单个元素的多个条件。写CSS时先想清楚目标元素到底是谁、它的类名分布在哪一层，再决定用空格还是不用空格，能避免绝大多数莫名其妙的样式失效问题。