css 新手最容易写错的选择器有哪些_避免混用 id 与 class_网络技术

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

发布时间 - 2026-01-13 00:00:00 点击率：次

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

# css # html # js # go # 浏览器 # app # 工具 # 区别 # 属性选择器 # class

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何优雅地解决PHP中XML与数组互转的繁琐问题，theno

下一篇：AI赋能！LG将在CES 2026展示全新汽车座舱解决方案

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何优雅地解决PHP中XML与数组互转的繁琐问题，theno

下一篇：AI赋能！LG将在CES 2026展示全新汽车座舱解决方案