CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html
一、基本的优先级规则
比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承
二、CSS权重规则
在《页面重构中的模块化设计》中提到,影响CSS样式权重,有两个重要因素:
A:样式的优先级跟样式定义的顺序有关
B:权值的大小跟选择器的类型和数量有关
一般来说,在同一个CSS文件中,如果有两个同名的样式,则后定义的会覆盖先定义的。选择器类型的优先级见(一)。
那么,CSS的权重是怎么算的呢?
一个selector的权重表示方式:0.0.0.0,按照计算规则给每位填充数字,对应位置相等,则比较下一位。
权重的计算规则如下:(为方便,用A.B.C.D代替各位置的值)
1、内嵌样式:A=1,B=C=D=0(即1.0.0.0)
2、ID样式:selector中带几个ID,第2位就加几个1 如#header{color:red},就是A=C=D=0,B=1(即0.1.0.0)
3、类,伪类,以及属性的个数就是第三位的值:
.a.b[type="text"]:hover{},选择器中有2个类,1个属性,1个伪类,所以它的第3位为4, A=B=D=0,C=4,(即0.0.4.0)
4、伪元素和标签元素的个数就是第四位的值
p:first-letter,有一个标签元素p和伪元素first-letter,值为2,A=B=C=0,D=2(即0.0.0.2)
5、通配符和继承得到的CSS属性对权重没有影响
三、几个示例
针对以上,看以下几个示例
1、.a .b .c {color:red;} //0.0.3.0 说明:只有三个类
2、*
{…} //0.0.0.0 说明:通配符对权重没有影响
3、.a .b a {color:green} //0.0.2.1 说明:两个类和一个标签
4、#hid {color:black;} //0.1.0.0 说明:只有一个ID
CSS:权重和层叠规则决定了其优先级的更多相关文章
- 权重和层叠规则决定了CSS样式优先级
一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...
- CSS:重量和级联规则,确定其优先级
资源:http://www.ido321.com/1063.html 首先,给大家看一篇关于CSS优先级的演示样例:http://www.ido321.com/76.html 一.主要的优先级规则 比 ...
- CSS标签类型和样式表继承与优先级
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- CSS的“层叠”规则的总结
当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...
- css层叠规则,优先级算法
前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...
- 盒模型 | CSS权重 | CSS层叠
span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...
- css层叠规则(层叠样式表)
CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...
- css知多少(3)——样式来源与层叠规则
上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...
随机推荐
- 用Maven插件生成Mybatis代码/数据库
现在代码管理基本上是采用Maven管理,Maven的好处此处不多说,大家用百度搜索会有很多介绍,本文介绍一下用Maven工具如何生成Mybatis的代码及映射的文件. 一.配置Maven pom.xm ...
- Linux 怎么重命名多个文件
下面是重命名命令的基本语法. rename [-v -n -f] <pcre> <files> <pcre> 是Perl兼容正则表达式,它表示的是要重命名的文件和该 ...
- php+phpquery简易爬虫抓取京东商品分类
这是一个简单的php加phpquery实现抓取京东商品分类页内容的简易爬虫.phpquery可以非常简单地帮助你抽取想要的html内容,phpquery和jquery非常类似,可以说是几乎一样:如果你 ...
- jsp页面之间传参用el表达式获取
jsp页面之间传参用el表达式获取 参数方法:${param.参数名} session方法:${session.变量名}
- HDU1717小数化分数2
小数化分数2 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- 有关PowerShell脚本你必须知道的十个基本概念
1.PS1文件 一个PowerShell脚本其实就是一个简单的文本文件,这个文件包含了一系列PowerShell命令,每个命令显示为独立的一行,对于被视为PowerShell脚本的文本文件,它的文件名 ...
- “破锣摇滚”乐队(codevs 1444)
题目描述 Description 你刚刚继承了流行的“破锣摇滚”乐队录制的尚未发表的N(1 <= N <= 20)首歌的版权.你打算从中精选一些歌曲,发行M(1 <= M <= ...
- oracle 10g 学习之视图、序列、索引、同义词(9)
目标 通过本章学习,您将可以: l 描述视图 l 创建和修改视图的定义,删除视图 l 从视图中查询数据 l 通过视图插入, 修改和删除数据 l 使用“Top-N” 分析 l 创建, 维护, ...
- WPF中的画图
1.border(边框): <Border BorderBrush="Blue" BorderThickness="0,1,1,1" Grid. ...
- sdut 2411:Pixel density(第三届山东省省赛原题,字符串处理)
Pixel density Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 Pixels per inch (PPI) or pi ...