CSS 注释语法：CSS 怎么写注释

CSS 注释的写法

CSS 注释以 /* 开头，以 */ 结尾。两者之间的所有内容都会被浏览器忽略，无论它只有一行还是有二十行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

只有这一种语法。CSS 没有单独的单行注释。

注释可以写在哪里

注释可以放在任何允许空白的地方：规则之间、声明之间、值的后面、选择器列表中间。在 .css 文件、<style> 元素和 style 属性中，它的用法都一样。

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

HTML 注释 <!-- ... --> 用于标记，而不是用于 CSS。HTML 注释页面把这两种语法放在一起做了对比。

注释掉代码

注释最常见的日常用途，是在不删除代码的前提下关掉某条声明，看看它起了什么作用。用 /* */ 把它包起来：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

删掉 border 那一行两边的 /* 和 */，琥珀色的边框就会出现。注释掉整条规则也是同样的方法：在选择器前面加 /*，在右花括号后面加 */。

大多数编辑器都能帮你切换注释：选中几行，按 Ctrl + /（macOS 上是 Cmd + /）。

为什么 // 会破坏你的 CSS

// 看起来像注释，因为在 JavaScript、Sass 和 Less 中它确实是注释。但在 CSS 中，它只是两个字符，会变成后面内容的一部分。于是浏览器看到一个无效的选择器，把紧接着的整条规则都丢掉，而且没有任何错误提示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

浏览器把 // this is NOT a comment .one 当成了一个选择器，而它是无效的，所以整条 .one 规则都被丢弃了。把这一行改成 /* this is a comment */，绿色背景就回来了。

注释不能嵌套

注释在遇到第一个 */ 时结束。如果用注释包住一段本身已经含有注释的代码，外层注释会提前结束：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

要注释掉一段含有注释的代码，先删掉或缩短里面的注释。

用注释组织样式表

很长的样式表加上分节标题会更易读。一种常见的写法：

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

注释会作为文件的一部分发送给每一位访问者，在查看网页源代码时也能看到，所以千万不要在注释里写密码、内部 URL 或任何你不愿公开的备注。

常见错误

• 使用 //。 它会悄悄删掉下一条规则。请用 /* */。
• 嵌套注释。 第一个 */ 就会结束注释，剩下的部分会破坏下一条规则。
• 忘记写结尾的 */。 /* 之后直到样式表末尾的所有内容都会变成注释。
• 在 CSS 中使用 <!-- -->。 这是 HTML 的注释语法，不能注释掉 CSS。
• 把机密信息留在注释里。 它们会随样式表一起发送到浏览器。