优化css关键选择器可显著提升渲染性能。浏览器从右向左匹配，应避免div、*等低效关键选择器，优先使用id、class或属性选择器；控制选择器嵌套深度不超过三层，删除通配符和空规则，并借助工具清理未用样式。
直接改关键选择器，比调整个文件更有效。浏览器匹配 CSS 是从右往左的，真正拖慢速度的是最右边那个部分（关键选择器），不是整条规则。
关键选择器必须能快速定位元素
浏览器先找所有匹配关键选择器的节点，再向上遍历父级验证是否满足整条规则。如果关键选择器是 div 或 *，就得扫完整个 DOM 树；换成 .btn-primary 或 #search-input，就能跳过绝大多数节点。
- 避免用
div、span等通用标签作关键选择器，尤其别写成nav ul li a - ID 和 class 优先于标签名 ——
#header比header快，.card-title比h3更稳 - 属性选择器如
[data-id]也比标签快，但不如 class；伪类如:hover不影响匹配性能，但会触发重绘
后代选择器深度超过三层就该警惕
像 section > article > header > h1 这种链式结构，每层都要做一次父级查找，实际开销远高于表面长度。关键是它容易因 DOM 微调而失效，维护成本高。
- 把中间层级“扁平化”：给目标元素加 class，比如直接用
.page-title替代section article header h1 - 子选择器
>比后代空格稍快，但差别不大；真正要砍的是嵌套层数，不是符号类型 - 如果必须保留结构语义，至少确保关键选择器（最右）是唯一或高区分度的 class，例如
.article-content p就比article p安全得多
避免通配符和空规则触发无谓计算
* 会让浏览器对每个节点都执行一次样式匹配，哪怕规则本身只是 * { box-sizing: border-box }。空规则 {} 虽不生效，但仍要参与解析和匹配流程。
- 用明确的元素列表替代
*：比如重置 margin/padding 时，只列真实用到的标签，或用现代方案*, *::before, *::after配合box-sizing - 构建时启用 PurgeCSS 或利用 Chrome DevTools 的 Coverage 面板，删掉未命中 DOM 的规则
- CI/CD 流程里加检查：禁止提交含
{}或孤立*的 CSS 文件
真正的瓶颈往往藏在看似无害的 div.header ul li a 里 —— 它不报错，也不影响功能，但会在首屏渲染时多花几毫秒，而这些毫秒叠加起来，就是用户感知到的“卡”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
