CSS 教程 / CSS 语法：选择器、声明、注释与常见错误

CSS 规则将选择器与花括号内以属性: 值; 形式书写的声明结合在一起。正确的语法有助于浏览器应用预期的样式，但格式错误的声明可以被忽略，而其他有效声明仍能继续工作。

阅读 CSS 规则的各个部分

.notice {
  color: #087f5b;
  padding: 16px;
}

每个属性允许不同的值。在 color 中输入颜色值，在 padding 中输入长度值。即使单词拼写正确，也不能将 padding: blue; 用作内边距值。16px 由数字和单位组成。如果像 16 px 那样使用空格，它将无法被读取为单一的长度值。

使用大括号、冒号、分号和空格

换行和缩进有助于人类更容易阅读代码。以下两种写法的效果相同，因为它们具有相同的选择器和相同的声明。当你刚开始学习时，如果将声明逐行分开，会更容易发现缺失的符号。如何根据要装饰的对象选择选择器，在基本 CSS 选择器：类型、类、ID 与属性中进行了比较。

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

虽然最终的声明可以省略分号，但始终写上分号可以使后续添加更安全。选择器的空格会改变含义：.notice.urgent匹配具有两个类的元素，而.notice .urgent匹配 notice 元素内部带有 urgent 类的后代元素，而不限于直接子元素。移除那个空格会改变选择器。参见MDN：CSS 语法入门。

将选择器分组并编写注释

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

用逗号将多个选择器链接到同一个声明块。h1, h2 分别选择 h1 和 h2，而 h1 h2 是另一个选择器，用于查找 h1 内的 h2。使用逗号适合于应用相同的颜色。

CSS 注释以 /* 开始，以 */ 结束。注释中的内容不会作为样式规则生效。它可以用来写解释或暂时排除一条规则，但如果漏掉了结束符号，后面的代码可能会被视作注释。在普通 CSS 中，不像 JavaScript 的 // 那样使用单行注释符号。

比较声明错误和选择器错误

当浏览器遇到 CSS 中的错误时，它会忽略无效的部分并继续处理可能的规则。这并不总是意味着“忽略一行错误”。缺失的分隔符或选择器错误可能会产生很大的影响。

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

这里只有 padding: blue 是无效的。除非还有其他规则，否则文本颜色和背景颜色会被应用，而内边距不会受到此声明的影响。如果属性名称拼写错误，比如 colro，该声明也不会被识别。

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

此代码块在第一个声明后缺少分号。浏览器将 blue background-color: #e9f7ef 当作 color 的值来读取，这是无效的。原本想设置的文字颜色和预期的背景声明都不会生效，但 padding: 16px; 仍然生效。在 blue 之后添加缺失的分号。

h1, .notice:made-up-state {
  color: blue;
}

一个未知的伪类使这个普通的以逗号分隔的选择器列表无效，因此该规则也无法应用于 h1。某些特殊的选择器列表使用容错解析。因此，此示例并未描述每个选择器列表上下文的行为。请参见 MDN：CSS 错误处理。

运行完整示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

如果你将整个代码保存为 index.html 并打开它，h1 和 h2 是相同的绿色，提示信息具有浅色背景、16px 内边距和 1px 边框。描述性句子显示为 18px。font-size 是设置字体大小的属性，line-height 是行高，border 是边框。这里先用这些属性帮助你把语法与显示结果联系起来。

查找并修复语法错误

用下面的代码替换整个示例中的 .notice 块。目标是修复两个语法错误，并使其“蓝色文本、浅绿色背景、16px 内边距”。在修改之前，可以通过将原始文件复制为另一个名字轻松恢复。

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

将 colro 改为 color，并在 background-color 之后添加冒号。保存并刷新：提示信息应该是蓝色文字、浅绿色背景，并有 16px 内边距。内边距已经有效，因此即使在语法错误修复之前，某些间距仍可保留。

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

如果你的编辑没有更改页面，首先检查是否打开了正确的文件。然后 使用开发者工具检查 CSS：Styles 与 Computed，以查看哪些值实际生效。在修改更多值之前，需要区分语法错误、匹配错误元素的选择器以及规则之间的冲突。