CSS进阶篇——分组和嵌套

Posted 2022-10-03 老梁写代码

分组和嵌套可以让代码更易于维护，无论是 html 代码还是 CSS 代码。

分组

分组的写法可以让我们同时为多个元素定义相同的属性。

例如，朴素的写法：

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> 和 <h> 的样式，只要它们的父级元素有 #top 这个 ID 选择器，样式就会生效。

<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>