HTML结构越深，CSS选择器匹配越慢，因浏览器从右往左匹配需多次祖先遍历；DOM深度超6层时样式计算可能增0.5ms以上，易致掉帧，且深层无语义嵌套迫使编写脆弱选择器。
HTML结构越深，CSS选择器匹配越慢——这不是理论，是Chrome DevTools里能直接看到的“Style Recalc”耗时上涨。
为什么选择器性能和HTML嵌套深度强相关
浏览器匹配CSS选择器是从右往左执行的。比如 main article time，它先找所有 time 元素，再逐个向上检查父级是否为 article，再查 article 的父级是否为 main。每多一层嵌套，就多一次祖先节点遍历；DOM树深度超6层时，单次样式计算可能多花0.5ms以上——对动画帧或滚动场景已足够触发掉帧。
更隐蔽的问题是：深层结构常伴随无语义 div 堆叠，导致你不得不写 div > div > div > p 这类选择器，既脆弱又低效。
- 用
devtools → Elements → 右键节点 → “Show DOM properties”查看nodeDepth，超过6就该重构 - 语义化标签（
section、article、header）本身不增加渲染开销，但能让选择器从div.div-wrapper__content p缩减为article p - 避免在
table内部嵌套多层div：单元格内样式计算成本高，嵌套后极易触发重排
哪些HTML结构会让CSS选择器“变笨”
不是所有嵌套都等价。有些结构天然增加选择器复杂度，且难以通过CSS优化绕过。
立即学习“前端免费学习笔记（深入）”；
-
<div class="container"><div><div><p>文本</p></div></div></div>：无语义三层嵌套，迫使你写.container p（虽浅但宽泛）或.container > div > div > p（深且脆） -
<nav><div class="nav-list"><ul><li><a></a></li></ul></div></nav>：中间插了div，让原本稳定的nav ul li a失效 -
<form><div><input type="email"></div></form>：表单控件被包裹，无法直接用form input[type="email"]定位，被迫加class
这类结构的问题不在“能不能写样式”，而在“改一次HTML，十处CSS要跟着动”。它把样式维护成本从CSS文件转移到了HTML结构上。
:last-of-type这类伪类为何依赖HTML结构
:last-of-type 不是看“视觉上最后一个”，而是严格按DOM树中同类型元素的顺序定位。它的可靠性完全取决于你是否把目标元素归到同一父容器下。
比如想让连续的 p.my-paragraph 中最后一个去掉 margin-bottom，但HTML是平铺的：
<p class="my-paragraph">1</p> <p class="my-paragraph">2</p> <button>btn</button> <p class="my-paragraph">3</p>
这时 p.my-paragraph:last-of-type 会匹配到第3个 p（因为它是整个文档中最后一个 p），而不是第2个（即“这组末尾”）。必须先重构HTML：
<div class="paragraph-group"> <p class="my-paragraph">1</p> <p class="my-paragraph">2</p> </div> <button>btn</button> <div class="paragraph-group"> <p class="my-paragraph">3</p> </div>
再写 .paragraph-group p:last-of-type 才真正可控。
- 别指望
:nth-last-child()替代——它数的是所有兄弟节点，只要前面插个span就失效 -
:last-of-type在IE11中支持良好，但:is()或:where()需要额外考虑兼容性 - 如果组内混有其他类型元素（如
p+blockquote），优先用data-group属性配合[data-group] :last-of-type
重构HTML结构时最容易忽略的细节
很多人改完HTML就以为万事大吉，结果发现CSS没生效、或者旧样式意外泄漏——问题往往出在边界处理上。
- 父容器加了
display: contents：它会让子元素“视觉上提升一级”，但DOM树层级不变，:last-of-type仍按原始结构匹配 - 动态插入内容（如React Fragment或Vue
<template>）：JSX中写的<><p>...</p><p>...</p></>不生成真实父节点，:last-of-type会跨Fragment生效 - 使用
scopedCSS（如Vue）时，属性选择器（如p[data-v-abc]）比类选择器稍慢，尤其当同页面有数百个带相同data-属性的元素时 - 不要为了“扁平化”强行删掉必要语义标签——把
header换成div虽然少一层嵌套，但失去语义锚点，反而让CSS更难写得稳定
最麻烦的不是结构深，而是深得“没道理”：既不提供语义，也不承载样式意图，纯为撑开布局或适配某段JS逻辑而存在。这种结构一旦固化，CSS就会变成补丁摞补丁的现场。
