CSS进阶篇——分组和嵌套

Posted feelang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS进阶篇——分组和嵌套相关的知识,希望对你有一定的参考价值。

分组和嵌套可以让代码更易于维护,无论是 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>

以上是关于CSS进阶篇——分组和嵌套的主要内容,如果未能解决你的问题,请参考以下文章

第64篇 自关联 分组查询和聚合查询 Q查询 F查询 ORM进阶

css基础 盒子模型border边框marginpaddingCSS分组和嵌套选择器Display(显示) 与 Visibility(可见性)Position 定位

CSS进阶篇——展示 (display)

CSS进阶篇——展示 (display)

CSS进阶篇——展示 (display)

CSS进阶篇——类和ID选择器