CSS选择器与HTML语义化如何配合使用

CSS选择器的健壮性与可维护性，根本上取决于对HTML语义化结构的尊重与利用——与其依赖易变的class名或深度嵌套的DOM路径，不如优先选用语义化标签（如`article > header h1`）、属性选择器（如`input[type="email"]`）、伪类（如`:invalid`、`:is()`）和谨慎使用的`data-`属性；控制后代选择器深度≤3层、避免业务逻辑侵入HTML、警惕测试属性与兼容性断层，本质上是在构建一种“抗重构”的样式系统：它不追求表面精确，而以DOM的真实结构和运行时状态为锚点，让CSS在频繁迭代中依然稳定可靠。

选择器别依赖 class 名，优先用语义化标签和属性

HTML 语义化不是为了“看起来规范”，而是为了让 CSS 选择器更稳定、更少被业务改版牵连。一旦你写 .user-info__avatar，后续只要前端改个 class 名、或者后端模板换套命名规则，样式就断了。

真正靠谱的锚点是 HTML 自身结构：比如