层叠的意思就是“继承”、“权重”、“覆盖”，通过良好的层级命名更好的实现效果，更少的代码，更多的功能，下面为大家详细介绍下，感兴趣的朋友不要错过
 
解答一：
层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
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层叠样式表的层叠是什么意思（转自知乎）

    转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...

  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. linux安装vsftpd后无法登陆

    安装完成后在主机上登陆时,不管是输入用户,还是匿名都无法登陆 经过检查,发现是因为/etc/hosts.deny禁止了所有ip访问 将hosts.deny中的all:all删除,或者在/etc/hos ...

  2. 微信小程序开发（七）获取手机网络类型

    // succ.wxml <view>手机网络状态:{{netWorkType}}</view> // succ.js var app = getApp() Page({ da ...

  3. C#的Lazy与LazyInitializer

    class Program { static void Main(string[] args) { //初始化 Lazy 类的新实例 //当延迟初始化发生时,将使用指定的初始化函数和初始化模式 // ...

  4. Maven编译指定(跳过)Module

    今天在项目里新添加了一个Module, 但是在jenkins编译的时候会将这个Module也编译, 问题是这个Module根本不需要编译而且巨慢. 因此我只想编译指定模块 ModuleA以及它依赖的必 ...

  5. Java实验1 - 类的继承(super)- 创建checkaccount继承account

    笔记总结: /** 任务81: 继承性,(降低代码亢余度) * 1.class 子类A Extends 父类B,(private 的内容无法被继承) * 2. 方法可以覆盖(Overrides), 注 ...

  6. 红米k30评测+全面解读

    暂时还没有图片等页面美化..其实网上有很多美图,这里不再粘贴了 红米k30是小米公司子品牌红米最近推出的一款性价比非常高的手机,以下进行多方面解读: 本人会尽量用不懂手机都能理解的语言来各方面讲解k3 ...

  7. 在eclipse中xml文件注释的快捷键

    在eclipse中xml文件注释的快捷键 注释:Ctrl+Shift+/ 取消注释:Ctrl+Shift+\

  8. CentOS 6 自定义单实例 二进制方式 安装mariadb-5.5.59

    系统平台: CentOS release 6.9 (Final) 内核 2.6.32-696.el6.x86_64 1.去官网下载适合的二进制包 http://mariadb.org/ mariadb ...

  9. GPU Debugger

    https://gpuopen.com/presentations/2019/digital-dragons-2019-make-your-game-friendly.pdf https://grap ...

  10. Java8-Stream-No.04

    import java.util.OptionalInt; import java.util.stream.IntStream; public class Streams4 { public stat ...