class 和 id 选择器必须严格对应：. 对应 class 属性，# 对应 id 属性；多 class 元素 CSS 中需连写无空格（如 .a.b）；id 仅用于 JS 或锚点，样式应统一用 class。
class 和 id 选择器写反了，浏览器不会报错但样式不生效
这是新手最常踩的坑：把 class="header" 写成 id="header"，却在 CSS 里用 .header 去选；或者反过来，HTML 用了 class="btn-primary"，CSS 却写成 #btn-primary。浏览器完全不报错，只是默默忽略匹配失败的选择器。
关键判断点：. 开头一定对应 class 属性，# 开头一定对应 id 属性，二者不能交叉使用。
- 检查 HTML 中的属性名是
class还是id - 检查 CSS 选择器开头是
.还是# - 用浏览器开发者工具（F12）看元素是否被该 CSS 规则“击中”——没被列在“Styles”面板里，大概率就是选错了
误以为 class 可以用 # 选，或 id 可以用 . 选
有人觉得“反正都唯一”，就用 #my-class 去选 class="my-class"，或者用 .my-id 去选 id="my-id"。这是无效的——CSS 选择器语法严格区分语义：# 只认 id 属性值，. 只认 class 属性值，和内容是否重复、是否唯一无关。
哪怕你只用了一次 class="logo"，也必须写成 .logo；哪怕你给某个元素加了 id="wrapper"，也不能靠 .wrapper 拿到它。
立即学习“前端免费学习笔记（深入）”；
-
#logo→ 只匹配id="logo" -
.logo→ 只匹配class="logo"（可多个元素） -
[id="logo"]或[class="logo"]是属性选择器，能绕过语法限制，但没必要，且性能略差
混淆 class 多值写法与空格分隔的后代选择器
HTML 中 class="btn btn-primary disabled" 是合法的，但新手常误写成 CSS 里的 .btn .btn-primary .disabled（带空格），结果变成“找 .btn 里面的 .btn-primary 里面的 .disabled”，而不是“同时有这三个 class 的元素”。
要选同时具备多个 class 的元素，必须连写无空格：.btn.btn-primary.disabled。
.btn.btn-primary.disabled {
opacity: 0.6;
cursor: not-allowed;
}- 空格 = 后代选择器（层级关系）
- 紧挨着的点 = 同时满足多个 class（逻辑与）
- 多 class 元素在 HTML 中用空格分隔，在 CSS 中用连续点连接
用 id 当作样式钩子，导致难以复用和维护
虽然 #nav-bar 能生效，但 id 在页面中必须唯一，且优先级远高于 class（#id 的 specificity 是 100，.class 是 10），容易引发样式覆盖冲突。新手常为每个按钮、标题都配一个 id，结果后期改一个样式要满页找 id 修改。
正确做法：id 仅用于 JS 锚点、getElementById 或 ARIA 关联（如 aria-labelledby），纯样式一律用 class。
- 需要复用？→ 用
class - 需要 JS 精准控制单个元素？→ 用
id，但别在 CSS 里依赖它做样式 - 想提高 specificity？用多个 class（如
.btn.btn--large.btn--primary），别靠#
真正难的不是记住 . 和 # 的区别，而是习惯性地把语义和用途分开：id 是“这个东西叫什么名字”，class 是“这个东西属于哪一类”。混用一次不报错，混用十次就难定位。
