CSS层叠样式表的层叠是什么意思(转自知乎)
转自知乎上的回答: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编写的需要。
解答三:
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名,如对于页面上方的<div>,可将其id设为header;页面下方的<div>设为footer,可以增强CSS的可维护性。
基本上层叠的意思就是“继承”、“权重”、“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能
CSS层叠样式表的层叠是什么意思(转自知乎)的更多相关文章
- CSS层叠样式表的层叠是什么意思
层叠的意思就是“继承”.“权重”.“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能,下面为大家详细介绍下,感兴趣的朋友不要错过 解答一: 层叠指的是样式的优先级,当产生冲突时以优 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- css优先级和层叠
css优先级和层叠 1.优先级 计算方法: a.行内样式 b.id选择器的数量 c.类,伪类和属性选择器的数量 d.标签选择器和伪元素选择 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- CSS层叠样式表(Cascading Style sheets)
CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- 《精通CSS层叠样式表》
书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完
- CSS:CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
- css:层叠样式表-网页布局基础
css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...
随机推荐
- git -- 如何撤销本地工作目录的修改
git checkout -- 文件名(包含路径) 撤销本地全部修改 git checkout .
- linux知识点总结与随笔(关注linux爱好者公众号的一些笔记)
sysdig工具,可以有strace ,tcpdump,lsof的功能. 前台任务与后台任务,知识点:test.sh &,Ctrl+z,bg,shopt grep |huponexit(sho ...
- Cocos2d-x Application Wizard for Visual Studio User Guide
0. Overview Cocos2d-x-win32's project can be generated by Wizard. Wizard supports Visual Studio 2008 ...
- C/C++中static关键字详解
静态变量作用范围在一个文件内,程序开始时分配空间,结束时释放空间,默认初始化为0,使用时可以改变其值. 静态变量或静态函数只有本文件内的代码才能访问它,它的名字在其它文件中不可见.用法1:函数内部声明 ...
- TypeScript开发手册
返回TS学习总目录 基本类型(Basic Types) 接口(Interfaces) 类(Classes) 模块(Modules) 函数(Functions) 泛型(Generics) 常见错误(Co ...
- [Microsoft Test Manager]CodeUI初探
开发环境: Widnows8 Microsoft Visual Studio Ultimate 2012 1. 新建一个 Windows Forms Application Figue1 Cr ...
- [WinAPI] API 13 [遍历指定目录 打印文件和其他属性]
Windows API中,有一组专门的函数和结构,用于遍历目录,它们是FindFirstFile函数.FindNextFile函数和WIN32_FIND_DATA结构.使用FindFirstFile和 ...
- SharePoint 2013 Service 状态无法启动,显示“启动中(Starting)”
Problem 在SharePoint 2013 Central Administration中启动 SharePoint Service(也称为:Service Machine Instance)时 ...
- C++ 泛型算法
<C++ Primer 4th>读书笔记 标准容器(the standard container)定义了很少的操作.标准库并没有为每种容器类型都定义实现这些操作的成员函数,而是定义了一组泛 ...
- IIS7.5 HTTP错误403.1-Forbidden 您尝试从某个目录运行CGI、ISAPI或其他可执行程序,但该目录不允许运行可执行文件
----------------错误详细---------------------------------------------------------------- --------------- ...