CSS层叠样式表的层叠是什么意思（转自知乎）

时间 2019-11-06

标签 css 层叠样式什么意思自知栏目 CSS 繁體版

原文原文链接

转自知乎上的回答：http://www.zhihu.com/question/20077745html

解答一：浏览器

层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
1. 开发者样式>读者样式>浏览器样式（除非使用!important标记）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式

如下是一段经典的html，三个类名分别为模块、标题和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html页面均可以由这种结构嵌套或者累加而成。字体

解答二：spa

CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，通常也被描述为权重高的覆盖权重低的，所以也称做层叠。每一个CSS选择器都会有一个权重（行内1000，id100，class10，tag一、能够这样认为），当两个选择器同时配置同一元素的同一属性时（好比一个设置color：red，另外一个color：black），就会产生冲突，而解决冲突的方案就是CSS选择器的权重，权重高的来覆盖权重低的。
另外，继承的属性是权重重最轻的，会被上面的四个定义方式覆盖。

CSS语义化其实更多地是指HTML的语义化。好比下面的一个代码咱们这样写：
<div class="box">
<div class="h2">这是区块标题</div>
<div class="bd">这是区块内容</div>
<div>
可是语义化的写法更能使得 robot识别网页的结构，下面是语义化的写法：
<section>
<h2>这是区块标题</h2>
<p>这是区块内容</p>
</section>
对于robot来讲，它可以识别section（区块）、h2(二级标题)、p(文字段落)，可是不能识别出div所包含的内容，由于div这个标记自己是无语义的（必要时经过class或id属性来赋予语义，可是这是次优选择）。而HTML5新增的article、header、footer、nav、section等标签就是丰富了HTML原生的语义标签，在很大程度上知足了HTML编写的须要。 htm

解答三：继承

个人理解是，层叠指的是上级标签的样式会自动继承到其全部下级标签，如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中，除非<p>重写了相关样式将其覆盖。
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名，如对于页面上方的<div>，可将其id设为header；页面下方的<div>设为footer，能够加强CSS的可维护性。

基本上层叠的意思就是“继承”、“权重”、“覆盖”，经过良好的层级命名更好的实现效果，更少的代码，更多的功能开发