核心不是选“快”的选择器，而是让浏览器少做无效匹配——关键在控制右侧候选集数量，最右边的选择器决定初始筛选范围，如a、span或*会遍历全页同类节点，而.user-name等类名可哈希定位、一步命中。
核心不是选“快”的选择器，而是让浏览器少做无效匹配——关键在控制右侧候选集数量，而不是删掉某种写法。
让关键选择器（最右边）足够唯一
浏览器从右往左匹配，最右边的选择器决定初始筛选范围。如果它太泛，比如 a、span 或 *，就要遍历全页同类节点，再逐个向上验证祖先结构。
- 避免写
div .content p em：先找所有em，可能成百上千个 - 换成
.user-name或.price-tag：类名可哈希定位，一步命中 - ID 选择器（如
#header）最快，但只适用于真正唯一的元素，别滥用
砍掉没必要的标签限定和深层嵌套
不是所有嵌套都慢，但“靠结构猜位置”的写法代价高。浏览器不关心你写了几个 div，只关心它要回溯几层才能确认匹配。
- 把
.menu ul li a改成.nav-link：跳过三层向上验证 - 限制视觉层级在 3 层内，比如
.card .title可接受，section article div p em就容易拖慢样式计算 - 慎用伪类组合，如
li:nth-child(2n+1) .label:hover，右侧.label:hover虽窄，但:nth-child()本身需遍历父容器子项
用语义化类名替代路径依赖
与其描述“它在哪”，不如定义“它是什么”。类名是主动声明，而后代选择器是被动推断，后者成本随 DOM 规模增长。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
.message-container > .message > .text，直接给文本加.message-body - 组件化开发中，每个模块输出的 HTML 应自带明确类名，而非靠外层 wrapper 传导样式
- Vue/React 中避免用
v-html渲染带深层结构的 HTML，它会引入不可控的嵌套和冗余标签
清理无效和低效的全局规则
有些写法看似简洁，实则隐性开销巨大，尤其在首屏加载或滚动动画期间。
- 禁用
* { box-sizing: border-box }：通配符强制遍历全部节点，改用html { box-sizing: border-box }+*::before, *::after { box-sizing: inherit } - 避免
button[disabled]:hover这类组合：交互频繁时反复触发匹配与重绘 - 用 Chrome DevTools 的 Coverage 面板检查哪些 CSS 规则从未生效，连带删掉对应的选择器
