CSS层叠
前面的话
层叠样式表CSS最基本的一个特性就是层叠。冲突的声明通过层叠进行排序,由此确定最终的文档表示。而这个过程的核心就是选择器及其相关声明的特殊性、重要性、来源及继承机制。本文将详细介绍CSS层叠
特殊性
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分(如:0,0,0,0)。下面来介绍不同的选择器的特殊性值
1、内联样式 -> 1,0,0,0
2、ID属性值 -> 0,1,0,0
3、类属性值、属性选择或伪类 -> 0,0,1,0
4、元素或伪元素 -> 0,0,0,1
5、结合符和通配选择器 -> 0,0,0,0
特殊性的值是从左向右排序的,特殊性值1,0,0,0大于以0开头的所有值,而无论后面是什么数。在一组规则中,特殊性最高的规则胜出
h1{} -> ,,,
p em{} -> ,,,
.grape{} -> ,,,
*.bright{} -> ,,,
p.bright em.dark{} -> ,,,
#id121{} -> ,,,
div#side *[href]{} -> ,,,
重要性
有时某个声明可能非常重要,超过了所有其他声明,CSS2.1称之为重要声明。重要声明在声明的结束分号之前插入!important来标志,如果!important放在声明的任何其他位置,整个声明都将无效
如果一个声明是重要声明,则超过所有的非重要声明
继承
继承是从一个元素向其后代元素传递属性值所采用的机制。基于继承机制,样式不仅可以应用到指定的元素,还会应用到它的后代元素
在两个比较特殊的情况需要注意:一个是在HTML中,应用到body元素的背景样式可以传递到html元素;另一个是<a>标签不会继承父元素的文本样式
[注意]继承的属性没有特殊性
来源
CSS按来源的不同分为3类:author(作者)、user(用户)、user agent(代理)
1、author(作者): 来自文档的样式文件。我们平常所写的样式基本上都是这一类的
2、user(用户): 用户指定的自定义的样式文件。一些UA允许用户导入自定义的样式文件
3、user agent(代理): 一些UA(如:浏览器)要为某些元素预设一个默认的样式,以方便阅读
关于用户CSS因为不常见,可能一些朋友不太理解。IE可以通过Internet 选项
-> 外观
-> 辅助功能
-> 用户样式表
来指定样式文件。Chrome可以使用Stylish
扩展来实现
层叠
CSS层叠样式表的层叠特性就是让样式层叠在一起,通过特殊性、重要性、来源及继承机制来排列层叠样式的顺序及选出胜出者
1、首先,按照来源及重要性排序。在不考虑重要性的前提下,优先级顺序为:author(作者) > user(用户) > user agent(代理)。但是,如果考虑重要性,则user(用户)的优先级大于author(作者)的优先级,这样做是试图平衡author(作者)和user(用户)。所以,最终的优先级排序为:user(用户)!important > author(作者)!important > author > user > user agent
2、接着,对于非重要声明来说,按照特殊性排序。特殊性越高的规则,权重越大
3、最后,如果特殊性相同,则按照出现顺序排序。声明在样式表或文档中越靠后出现,权重越大。如果样式表中有通过@import导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表的所有声明在后
CSS层叠的更多相关文章
- CSS 层叠及样式表来源
Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...
- css考核点整理(二)-css层叠机制
css层叠机制 外边距重叠就是margin-collapse. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种合并外边距的方式被称为折叠,并且因 ...
- CSS层叠和继承
CSS具有两个核心的概念--继承和层叠.一般文本类的属性会被继承,即某个元素的CSS属性会传递给内部嵌套的元素.一个元素可能有一个或者多个样式的来源,当属性发生冲突时,就会根据加载顺序和权重大小决定层 ...
- css层叠规则,优先级算法
前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...
- CSS学习笔记03 CSS层叠性、继承性、特殊性
层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...
- css层叠性和继承性
1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...
- 盒模型 | CSS权重 | CSS层叠
span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...
- css层叠规则(层叠样式表)
CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...
- css 层叠 比较特殊性
css 层叠: 多个相同的css声明(属性),应用到同一个元素上.当一个标签声明冲突时,浏览器会自动出发层叠机制 1:比较优先级 2:比较特殊性 3:比较源次序 依次经过上面的1,2,3的比较后,最终 ...
随机推荐
- i love matlab
新手上路~话说图像修复熟么的真的很有意思~忽的想起NG讲的一个笑话:它让我赚了很多钱,买了车子,买了房子,so what's that? It's Matlab <( ̄3 ̄)> 前两天一直 ...
- 在WPF的WebBrowser控件中屏蔽脚本错误的提示
在WPF中使用WebBrowser控件显示网页时,经常会报脚本错误的提示,如何屏蔽掉这些错误提示呢.方法是定义如下方法: public void SuppressScriptErrors(WebBro ...
- iOS关于定制某个控件四个角是否为圆角
UIView *myView=[[UIView alloc]initWithFrame:CGRectMake(50, 70, 200, 200)]; UIBezierPath * bezierPath ...
- cefsharp开发实例1
做了几年.NET开发,基本都是搞WEB居多,以前也搞过一个winform项目,虽然很把界面拼接出来了,但是感觉有点痛苦,改动的时候又要改动一大堆代码.最近又要搞个桌面软件,试着搜索了下html做界面方 ...
- ASP.NET 4.5.256 has not been registered on the Web server. You need to manually configure your Web server for ASP.NET 4.5.256 in order for your site to run correctly
Microsoft .NET Framework 4.6安装后,用户可能会在使用Microsoft Visual Studio 创建(或打开现有项目时)网站.或Windows Azure项目时遇到下面 ...
- 可在广域网部署运行的QQ高仿版 -- GG叽叽(源码)
前段时间看到园子里有朋友开发了QQ高仿版的程序,我也非常有兴趣,以前一直有个做即时聊天程序的梦,趁这段时间工作不是很忙,就开始动手来做这个事情.根据我以往积累下来的项目经验,实现QQ的基本功能,问题应 ...
- Win10 UWP应用发布流程
简介 Win10 UWP应用作为和Win8.1 UAP应用不同的一种新应用形式,其上传至Windows应用商店的流程也有了一些改变. 这篇博文记录了我们发布一款Win10 UWP应用的基本流程,希望为 ...
- 实现tip浮层
实现简单的tip浮层: html代码: <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力)
系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...
- 上学时的HTML+JS+CSS(小总结)
html:超文本标记语言 基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域. <br />:换行. <hr wid ...