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；任何看似无害的位置，都可能因解析器差异变成雷区。
