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