后代选择器匹配左侧祖先元素内任意嵌套层级的右侧元素，如.article-content p可选中子、孙、曾孙等所有p元素，只要存在祖先–后代路径连通。
后代选择器到底匹配哪些元素？
后代选择器生效的前提，是存在“祖先–后代”关系，而不是“父子紧邻”关系。只要右侧元素在左侧元素的任意嵌套层级内（子、孙、曾孙……），就会被选中。
-
.article-content p会命中<div class="article-content"><p>…</p><section><p>…</p></section></div>中两个p，哪怕第二个被包了三层 - 它不关心中间有没有
div、article或span，只要路径连通就生效 -
浏览器解析时从右往左匹配：先找所有
p，再向上逐层检查父辈是否满足左侧条件
为什么写了却没生效？常见失效原因
样式写对了但没起作用，90% 是选择器语义理解偏差或结构误判。
- 误把“多类共存”当“多层嵌套”：
.greenfooter.container.row.col-md-3 h5想选四层嵌套，实际是在找一个同时有这四个 class 的元素——而它们通常分属不同标签 - HTML 结构和预期不符：比如你以为
.card下直接是p，结果中间插了个<div class="card-body">，但.card p仍有效，只是你忘了检查 DOM 树 - 优先级被更高权重规则覆盖：比如
div#main p（ID + 标签）比.content p（类 + 标签）优先级高，后者会被静默忽略
怎么写才既精准又可持续？
不是越深越准，而是越贴近语义、越少依赖结构越稳。
- 优先用语义化类名代替深层标签链：
.sidebar .title比aside > section > header > h2更耐改、更易读 - 控制层级深度：超过三层（如
.layout .main .content p）就该考虑加个新类，比如.content-text - 需要限定“只到某一层”时，混用子选择器：
.nav > ul > li a控制一级菜单链接，.nav ul li a（无>）则覆盖全部下拉项 - 避免纯标签选择器（如
div p）：一旦 HTML 改用section或article包裹，样式就断了
后代选择器 vs 子选择器：什么时候该换 >？
空格和 > 看似只差一个符号，但行为完全不同，选错会导致样式漏控或误控。
立即学习“前端免费学习笔记（深入）”；
.card p { color: #333; } /* 所有子孙 p 都变灰 */
.card > p { color: #111; } /* 只有 .card 直接子级的 p 变黑 */- 用空格：想统一控制某个区域内的所有同类元素（如文章正文所有段落行高）
- 用
>：要区分层级样式（如卡片标题用> h3，卡片描述用.desc p） - 注意：子选择器不能跳过层级，
.container > p > span要求p是直接子元素，且其下必须有span直接子元素，中间不能有任何其他标签
后代选择器本身很简单，真正难的是在真实项目里判断“这个空格该不该留”“这个类该不该加”“这个层级要不要砍”。结构一变，靠深度堆出来的选择器就成负债；而靠语义命名+合理层级写出来的，改三次 HTML 都还能稳稳生效。
