CSS选择器应优先依赖HTML语义化标签、属性和伪类，而非class名；推荐深度≤3层的后代选择器，善用:is()、data-属性（限必要状态），避免过度嵌套与业务逻辑耦合。
选择器别依赖 class 名，优先用语义化标签和属性
HTML 语义化不是为了“看起来规范”，而是为了让 CSS 选择器更稳定、更少被业务改版牵连。一旦你写 .user-info__avatar，后续只要前端改个 class 名、或者后端模板换套命名规则，样式就断了。
真正靠谱的锚点是 HTML 自身结构：比如 <article></article> 里一定有 <header></header>，<nav></nav> 下大概率是 <ul></ul> 套 <li>，<button type="submit"></button> 比 .btn-primary 更具排他性。
- 能用
article > header h1就别用.post-title - 表单控件优先靠
input[type="email"]、textarea:required定位，而不是加一堆修饰 class -
[data-testid]是测试专用，别在生产 CSS 里依赖它——它随时会被 CI/CD 流水线自动删掉
后代选择器比子选择器更耐 DOM 变动，但得控制深度
很多人觉得 nav > ul > li > a 很“精确”，其实它极其脆弱：只要中间插一层 <div>（比如加个加载状态容器），整个链就失效。而 <code>nav a 虽然宽泛，但只要导航区域没重构成 <section></section>，它就一直生效。
关键不是“越细越好”，而是“刚好够用+有容错”。浏览器匹配选择器是从右往左的，太深的嵌套还影响性能。
立即学习“前端免费学习笔记（深入）”；
- 推荐深度 ≤ 3 层，例如
main article time，而不是body > div#app > main > section > article > header > time - 用
:is()合并同类场景，比如article :is(h2, h3)比分开写两行更易维护 - 避免无意义的
div > div > div—— 这说明 HTML 结构本身就没语义，该先重构 HTML
伪类和属性选择器比 class 更可靠，但要注意兼容性断层
像 a[href^="https://"]、img:not([alt])、input:invalid 这类选择器，直接读取 DOM 状态，不依赖人工维护的 class，天然抗“命名污染”。但 IE11 不支持 :is()、:where()，[attr~="val"] 在旧 Safari 里行为也不一致。
- 现代项目可放心用
:has()做父元素控制，但注意它目前不支持在 CSS 动画或 transition 中触发重绘 -
[hidden]和[aria-hidden="true"]行为不同，前者会移出渲染流，后者只是视觉隐藏——选错会导致 JS 获取offsetHeight出错 - 慎用
:nth-child(n)定位内容——它数的是兄弟节点，不是“第几个内容块”。加了个注释<!-- tips -->或服务端注入的空<span></span>，序号就全乱了
用 data- 属性做选择器时，只暴露必要维度
data- 是语义化和样式解耦的缓冲带，但它不是 class 的替代品。滥用 data-ui-role="card-header" 只会让 HTML 膨胀，且增加 JS 和 CSS 的隐式耦合。
真正该用它的场景，是那些 class 难以表达、又必须样式响应的状态：比如主题色切换、编辑态/预览态、A/B 实验分组。
- 只用小写字母和短横线，如
data-status="loading"，别写data-Status或data_status（部分浏览器解析不一致） - 避免把业务逻辑塞进属性值，比如
data-price-tier="premium"—— 价格策略变，CSS 就得跟着改，不如用data-tier="premium"+ 独立样式 scope -
data-选择器权重和 class 相同，别指望靠它“绕过”样式覆盖问题；真要降权，用:where([data-foo])
CSS 选择器的稳定性，不取决于你写了多“精准”的规则，而取决于你有多尊重 HTML 的原始结构和运行时状态。DOM 改动永远比 CSS 改动更频繁，所以最健壮的选择器，往往是最“懒”的那个——它不假设结构，只响应事实。
