CSS基础选择器只有元素、类、ID三种；div .wrap是后代选择器，div.wrap是交集选择器；类适用于样式复用，ID适用于JS操作或锚点；属性选择器是表单控制刚需。
基础选择器就三种：元素、类、ID
CSS 基础选择器只有 元素选择器（如 p）、类选择器（如 .btn）和 ID 选择器（如 #header）。其他所谓“选择器”要么是它们的组合，要么属于高级语法范畴。初学者常误把后代选择器（nav a）或属性选择器（input[type="text"]）当作“基础类型”，其实它们都建立在这三者之上。
div .wrap 和 div.wrap 差一个空格，意思完全不同
这是最常踩坑的写法混淆点：
-
div .wrap：空格表示后代关系 → 所有在div内部、任意嵌套层级的.wrap元素都会被选中 -
div.wrap：无空格表示交集 → 只匹配既是div标签、又带有class="wrap"的元素 - 同理：
#nav .menu是 ID 下找后代类，#nav.menu是要求同一个元素同时有 ID 和 class
类 vs ID：不是“用哪个更高级”，而是“用在哪最合适”
别再纠结“该用 class 还是 id”，看使用场景：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 需要 JS 操作或锚点跳转 → 用
ID（document.getElementById()或#section2链接） - 样式要复用、要组合、要响应式开关 → 用
class（比如btn btn-primary btn-lg） - 页面中唯一且语义明确的容器 → 可用
ID，但现代 CSS 更倾向用class+ BEM 命名（如.header-main），避免 ID 特异性过高导致覆盖困难
属性选择器不是“进阶技巧”，而是表单和状态控制刚需
尤其在处理表单、自定义复选框、禁用态时，[type="submit"]、[disabled]、[data-status="loading"] 这类写法比硬加 class 更干净：
立即学习“前端免费学习笔记（深入）”；
input[type="checkbox"]:checked + label {
color: #007bff;
}
[data-theme="dark"] .card {
background: #343a40;
}
注意：[attr] 不区分大小写（HTML 属性名本身不敏感），但 [attr="value"] 中的 value 区分大小写（取决于 HTML 实际值）；IE8+ 支持主流写法，无需 polyfill。
class 驱动，ID 仅用于 JS 锚点或极少数顶层容器，而属性选择器一旦用熟，会自然替代一堆冗余 class。 
