类选择器是首选，因其不依赖DOM结构层级且允许多个元素复用，抗重构能力强；ID选择器次之，仅适用于唯一元素；标签名或:nth-child()等位置型选择器易因DOM变动失效。
直接用类选择器最稳妥，ID选择器次之；靠标签名或位置（如 :nth-child()）选元素，容易因 DOM 变动失效。
为什么 class 选择器是首选
它不依赖结构层级，也不要求唯一性，改 HTML 时不易断链。一旦加了 class="btn-primary"，CSS 里写 .btn-primary 就能稳稳命中。
- 多个相同语义的元素可共用一个 class，比如所有主按钮都用
btn-primary - 可叠加使用：
class="btn btn-primary is-loading"对应.btn.is-loading - 比
div > button:first-child这类路径式选择器抗重构能力强得多
什么时候必须用属性选择器
当目标元素没有 class 或 id，但有稳定、可识别的属性时——比如表单控件、图标字体、data 属性标记的节点。
-
input[type="email"]比form input更精准，避免误选其他输入框 -
[data-role="tooltip"]是前端框架常用标记方式，比靠 DOM 位置更可靠 - 注意 IE7+ 才支持，老项目需确认兼容范围
:nth-child() 和 :nth-of-type() 的实际差异
两者都常被用来“选第几个”，但行为完全不同，错用会导致样式挂掉。
立即学习“前端免费学习笔记（深入）”；
-
li:nth-child(2)：父元素下第 2 个子节点，且该节点必须是li；如果第 2 个是div，这条规则就无效 -
li:nth-of-type(2)：父元素下第 2 个li元素，不管中间夹了多少别的标签 - 常见坑：
ul li:nth-child(1)看似选第一个li，但如果ul开头有注释或文本节点，就可能失灵
伪元素（如 ::before）必须带 content
没写 content，::before 或 ::after 根本不会渲染，这是硬性规则，不是可选项。
- 哪怕只加个空格也要写
content: " "，不能留空或省略 -
content: ""是合法的，会生成一个无内容但可设宽高/背景的伪元素 - 想用图标字体？
content: "\e901"，别漏了引号和反斜杠
真正难的不是写对一条规则，而是预判它在组件复用、服务端渲染、动态插入等场景下是否依然有效——class 和属性选择器在这点上远比位置型选择器靠谱。
