css注释不能嵌套,/*...*/中再写/*会提前终止;注释位置敏感,选择器后、属性值中、媒体查询内易出错;含特殊字符的注释可能被构建工具误处理;伪类/伪元素内注释会破坏选择器有效性。

注释不能嵌套,/* ... */ 里再写 /* 会提前终止
这是最常踩的坑:CSS 不支持嵌套注释。一旦在 /* 和 */ 之间又出现 /*,浏览器会把第一个 */ 当作整个注释块的结束,后面的内容直接暴露为未注释代码,可能引发样式错乱或语法错误。
常见错误现象:
- 本想注释掉一整段样式,结果只注释了前半部分,后半部分意外生效
- 调试时临时加注释,没注意已有注释符号,导致后续声明被“解封”
正确做法是手动删或逐行加 /* */,别图省事用编辑器自动包裹多行——很多编辑器对 CSS 注释的自动包裹逻辑不严谨。
注释位置影响解析,特别是紧跟在选择器或属性名后
CSS 解析器对注释位置敏感。虽然规范允许在大多数空白处插入注释,但以下位置容易出问题:
-
.btn {/* color: red; */}—— 选择器后紧挨着写注释,某些旧版浏览器(如 IE8)可能报错或忽略整个规则 -
color: /* fallback */ #333;—— 属性值中间插注释,虽合法但可读性差,且部分构建工具(如旧版 cssnano)会误删 -
@media (min-width: /* 768px */ 768px) { ... }—— 媒体查询条件中插注释,某些预处理器(如早期 Sass)不兼容
建议把注释放在声明块顶部、属性之间或独立成行,避开语法关键节点。
注释内容含特殊字符可能干扰构建或压缩
现代前端工程中,CSS 经常被 PostCSS、PurgeCSS、cssnano 等工具处理。注释若含特定字符串,可能被误判:
-
/* purgecss ignore */这类指令性注释会被 PurgeCSS 识别并跳过对应规则,但拼错(如purgecss ingore)就完全失效 -
/*! important comment */(感叹号开头)会被多数压缩工具保留,用于版权声明,但漏掉!就会被删光 - 注释里写
TODO、FIXME虽方便团队协作,但上线前最好清理——有些 CI 流程会扫描并报 warning
不要依赖注释传递运行时逻辑;它不是 JS 的 // @ts-ignore,没有标准语义。
伪类/伪元素里的注释会破坏选择器有效性
在 :hover、::before 等伪类或伪元素上加注释,极易让整个选择器失效:
-
a:hover /* mobile-only */ { ... }→ 整条规则被浏览器忽略(语法错误) -
div::before /* icon */ { content: "→"; }→ 多数浏览器能容忍,但 Safari 旧版本会丢弃该声明
真正安全的做法是把注释写在选择器**上方一行**,或合并到选择器分组的通用注释里,比如:
/* 按钮悬停态,仅桌面端启用 */
.btn:hover,
.btn:focus {
color: #007bff;
}
注释不是装饰,它是 CSS 解析流程中的真实 token;任何看似无害的位置,都可能因解析器差异变成雷区。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











