原文： https://www.freecodecamp.org/news/comments-in-css/
在 CSS 中，注释是用来解释一个代码块的，或者在开发过程中进行临时的修改。被注释的代码不会被执行。
CSS 中的单行和多行注释都以 /* 开头，以 */ 结尾，你可以在你的样式表中添加任意多的注释，比如说：
/* This is a single line comment*/
.group:after {
content: "";
display: table;
clear: both;
}
/*
This is
a multi-line
comment
*/你也可以通过添加样式来使你的注释更有可读性：
/*
***
* SECTION FOR H2 STYLE
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph
* help make it more readable.
***
*/用注释来组织 CSS
在大型项目中，CSS 文件会迅速增大，变得难以维护。将你的 CSS 组织成不同的部分，并列出目录，以方便日后查找某些规则：
/*
* CSS TABLE OF CONTENTS
*
* 1.0 - Reset
* 2.0 - Fonts
* 3.0 - Globals
* 4.0 - Color Palette
* 5.0 - Header
* 6.0 - Body
* 6.1 - Sliders
* 6.2 - Imagery
* 7.0 - Footer
*/
/*** 1.0 - Reset ***/
/*** 2.0 - Fonts ***/
/*** 3.0 - Globals ***/
/*** 4.0 - Color Palette ***/
/*** 5.0 - Header ***/
/*** 6.0 - Body ***/
h2 {
font-size: 1.2em;
font-family: "Ubuntu", serif;
text-transform: uppercase;
}
/*** 5.1 - Sliders ***/
/*** 5.2 - Imagery ***/
/*** 7.0 - Footer ***/关于 CSS 的更多信息：CSS 语法和选择器
当我们谈论 CSS 的语法时，我们谈论的是事物的排列方式。有一些规则规定了什么东西该放在哪里，这既是为了让你能够一致地编写 CSS，也是为了让程序（如浏览器）能够正确地解释它并将其应用到页面上。
有两种主要的 CSS 编写方法：
内联 CSS
关于 CSS 特性的具体说明：CSS Tricks
内联 CSS 将样式应用于单个元素及其子元素，直到遇到另一个覆盖第一个元素的样式。
要应用内联 CSS，在你想修改的 HTML 元素上添加 “style” 属性。在引号内，包括一个以分号分隔的键/值对列表（每个键/值对以冒号分隔），表示要设置的样式。
下面是一个内联 CSS 的例子。字母 “One” 和 “Two” 的背景颜色为黄色，文字颜色为红色。“Three” 这个词有一个新的样式，它覆盖了第一个样式，并将有一个绿色的背景颜色和青色的文本颜色。在这个例子中，我们将样式应用于 <div> 标签，但你可以将一个样式应用于任何 HTML 元素。
<div style="color:red; background:yellow">
One
<div>
Two
</div>
<div style="color:cyan; background:green">
Three
</div>
</div>内部 CSS
虽然编写内联样式是改变单个元素的快速方法，但有一个更有效的方法可以将同一个样式一次性应用到页面的许多元素上。
内部 CSS 的样式在 <style> 标签中说明，被嵌在 <head> 标签中。
这里有一个例子，其效果与上面的“内联”例子相似，只是 CSS 被提取到了自己的区域。“One” 和 “Two” 这两个词将与 div 选择器相匹配，成为黄色背景上的红色文本。“Three” 和 “Four”也将与 div 选择器相匹配，但它们也与 .nested_div 选择器相匹配，后者适用于任何引用该类的 HTML 元素。这个更具体的选择器覆盖了第一个选择器，它们最终会显示为绿色背景上的青色文本。
<style type="text/css">
div { color: red; background: yellow; }
.nested_div { color: cyan; background: green; }
</style>
<div>
One
<div>
Two
</div>
<div class="nested_div">
Three
</div>
<div class="nested_div">
Four
</div>
</div>上面显示的选择器是非常简单的，但它们可以变得相当复杂。例如，有可能只对嵌套元素应用样式；也就是说，一个元素是另一个元素的子级。
这里有一个例子，我们指定了一个样式，这个样式应该只应用于作为其他 div 元素的直接子元素的 div 元素。结果是，“Two” 和 “Three” 将显示为黄色背景上的红色文本，但 “One” 和 “Four” 将保持不受影响（很可能是白色背景上的黑色文本）。
<style type="text/css">
div > div { color: red; background: yellow; }
</style>
<div>
One
<div>
Two
</div>
<div>
Three
</div>
</div>
<div>
Four
</div>外部 CSS
所有的样式都有一个文件，在 <head> 中被链接。链接文件的扩展名是 .css。