css 新手最容易写错的选择器有哪些_避免混用 id 与 class

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 是“这个东西属于哪一类”。混用一次不报错，混用十次就难定位。