注释提前终止会导致样式错乱或语法报错：外层注释被首个*/关闭，使后续代码“裸奔”执行；媒体查询中嵌套注释致括号不匹配而整条规则丢弃；选择器内注释吞掉属性致样式失效。
因为 CSS 解析器在遇到第一个 /* 就开始注释，直到**遇见最近的 */ 就立即终止**，中间再出现 /* 不会开启新注释，而是被当作普通文本——而那个提前出现的 */ 会让注释提前结束，后面内容“裸奔”执行。
注释提前终止会导致什么实际问题？
最典型的是样式错乱或语法报错：
- 写成
/* 外层 /* 内层 */ 外层继续 */→ 实际只注释了外层 /* 内层，后面的外层继续 */会被浏览器当作 CSS 代码解析，很可能因缺少{或属性格式错误而静默失效 - 在媒体查询里嵌套注释：
@media (min-width: 768px) { /* .btn { color: red; } */ }，如果误写成/* @media ... { /* ... */ } */，第一个*/就关掉了外层注释，@media暴露出来但括号不匹配，直接导致整条规则被丢弃 - 选择器后紧跟注释再写属性，如
.header /* comment */{ color: blue; }是合法的；但若写成.header {/* comment */ color: blue; }，其中/* comment */会吞掉{后面的内容，导致color: blue;被注释掉，样式不生效
CSS 注释位置敏感的三个高危场景
注释不是“随便放哪都行”，它会影响解析上下文：
-
属性值中不能加注释：比如background: /* fallback */ #fff url(img.png);是非法的，/* fallback */会中断属性值解析，整条声明失效 -
伪类/伪元素选择器内写注释会破坏结构：a:hover/* tip */::before中的注释让解析器无法识别::before，整个选择器无效 -
@supports或@keyframes块内注释需严格配对，且不能跨过块边界 —— 例如在@supports (display: grid) { /* ... */ }里漏写*/，会导致后续所有 CSS 被当作注释内容吞掉
构建工具可能把含特殊字符的注释当异常处理
某些 PostCSS 插件、CSS 压缩器（如 cssnano）或打包工具（如 Webpack 的 css-loader）会对注释做预处理：
立即学习“前端免费学习笔记（深入）”；
- 注释里含
\、$、@等字符时，可能被误判为变量或指令前缀，触发警告甚至移除整段注释 - 使用
/*! ... */（带叹号）通常表示“保留注释”，但若构建配置没启用preserveComments，这类注释仍可能被删掉 - SCSS/Less 文件里混用原生
/* */和预处理器注释（如//），容易在编译阶段被不同插件分别处理，造成注释残留或错位
真正容易被忽略的是：注释本身没有语法错误提示。浏览器不会报 Invalid comment，它只是默默截断、跳过、或把本该注释的内容当成代码执行——出问题时你得倒着查，从渲染结果反推哪段注释“没起作用”。
