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

解答一：

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

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

解答二：

CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。每个CSS选择器都会有一个权重（行内1000，id100，class10，tag1、可以这样认为），当两个选择器同时配置同一元素的同一属性时（比如一个设置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编写的需要。

解答三：

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

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

CSS层叠样式表的层叠是什么意思（转自知乎）的更多相关文章

  1. CSS层叠样式表的层叠是什么意思

    层叠的意思就是“继承”.“权重”.“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能,下面为大家详细介绍下,感兴趣的朋友不要错过   解答一: 层叠指的是样式的优先级,当产生冲突时以优 ...

  2. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  3. css优先级和层叠

    css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择 ...

  4. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  5. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  6. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  7. 《精通CSS层叠样式表》

    书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完

  8. CSS：CSS层叠样式表的概述

    CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...

  9. css:层叠样式表-网页布局基础

    css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...

随机推荐

  1. JavaScript-indexOf函数

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. Linux 查杀进程

    ps -eaf |grep "stoporder.php" | grep -v "grep"| awk '{print $2}'|xargs kill -9 # ...

  3. tcp/ip的一些概念

    MTU,即Maximum Transmission Unit(最大传输单元),此值设定TCP/IP协议传输数据报时的最大传输单元.以太网的MTU值是1500 bytes. 首先计算最大的IP包中IP净 ...

  4. 《理解 ES6》阅读整理：函数（Functions）（二）Unnamed Parameters

    使用未命名参数(Working with Unnamed Parameters) JavaScript并不限制传递给函数的实参个数,你可以总是传递比形参个数多或者少的实参.在ES6中当向函数传递比形参 ...

  5. python文件选择：tkFileDialog 基础

    tkFileDialog有两种形式: 一个是.askopenfilename(option=value, ...) 这个是"打开"对话框 另一个是:asksaveasfilenam ...

  6. django rest_framework－－入门教程3

    rest_framwork 之post 与put rest_framwork可以接受post与put delete get请求,可以对资源进行刚CRUD,以一个DEMO为例, 1．先在VIEW里定义一 ...

  7. C语言 数组 列优先 实现

    C语言数组结构列优先顺序存储的实现 (GCC编译). 从行优先转换为列优先存储方式, 与行优先相比, 不同之处在于改变了数组维界基址的先后顺序, 从而改变了映像函数常量基址. /** * @brief ...

  8. 【shell脚本】显示文件的偶数或奇数行

    # Dispaly the odd line. awk 'NR%2==1' file

  9. [ACM_模拟][ACM_暴力] Lazier Salesgirl [暴力 懒销售睡觉]

    Description Kochiya Sanae is a lazy girl who makes and sells bread. She is an expert at bread making ...

  10. Deployment Pipeline using Docker, Jenkins, Java

    Deployment Pipeline using Docker, Jenkins, Java and Couchbase http://blog.couchbase.com/2016/septemb ...