Grouping and Nesting

分组

你可以为多个选择器赋予相同的属性，而无需重复编写。

例如，如果你有类似这样的代码

h2 {
    color: red;
}

.thisOtherClass {
    color: red;
}

.yetAnotherClass {
    color: red;
}

你可以简单地用**逗号**将选择器分隔在一行中，并为它们应用相同的属性，所以上面的代码可以变成

h2, .thisOtherClass, .yetAnotherClass {
    color: red;
}

嵌套

如果 CSS 结构良好，就不需要使用许多类或 ID 选择器。这是因为你可以为其他选择器内部的选择器指定属性。

例如

#top {
    background-color: #ccc;
    padding: 1em
}

#top h1 {
    color: #ff0;
}

#top p {
    color: red;
    font-weight: bold;
}

这消除了在 `p` 和 `h1` 标签上使用类或 ID 的需要，如果它应用于看起来像这样的 HTML

<div id="top">
    <h1>Chocolate curry</h1>
    <p>This is my recipe for making curry purely with chocolate</p>
    <p>Mmm mm mmmmm</p>
</div>

这是因为，通过用空格分隔选择器，我们正在说：“ID top 中的 `h1` 颜色为 #ff0” 和 “ID top 中的 `p` 是红色并且加粗”。

这可能会变得相当复杂（因为它可能超过两个级别，例如这个里面的这个里面的这个里面的这个等等），并且可能需要一些练习。