CSS - 权重，样式优先级
关于CSS权重，一套计算公式来去计算，就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准。
遇到样式应用问题，计算一下权重就知道优先级。
具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 重要的 | ∞ 无穷大 |
注意
1. 权重能叠加但不能进位
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
2. 相同权重，就近原则（CSS的层叠性）
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3{
color:green;
}
#box1 div{
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
文字为yellow， 因为div #box3 的权重为 0001 + 0010 = 0011；#box1 div 的权重为 0010 + 0001 = 0011；相同权重，但后者在下面，比较近，根据层叠性，黄色覆盖了绿色。
3. 继承样式的权重为0。
即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
<style type="text/css">
div p{
color:red;
}
#father{
color:red!important;
}
p.c2{
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
字体是蓝色
</p>
</div>
继承来的!important权重变为0000，被.c2覆盖（.c2权重为0010，并且加上层叠性），所以不起作用。但是#father p就是 0000 + 0001 = 0001
CSS - 权重，样式优先级的更多相关文章
- css权重及优先级问题
css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...
- css层叠样式优先级总结
虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...
- CSS 之 样式优先级机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...
- css 选择器样式优先级
!important > 行内 >id > class >tag >*
- css样式权重优先级，css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- CSS权重;慎用!important
初初接触样式的前端开发者在碰到样式覆盖时,最先选择的往往是!important. 但是这种做法不好,应该优先考虑从样式的级联属性或者位置来解决问题. 切记以下情况永远不要使用!important: 1 ...
- 权重和层叠规则决定了CSS样式优先级
一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...
- 关于css里决定样式优先级的权重
最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...
- CSS权重及样式优先级问题
CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...
随机推荐
- Windows Server 2008 R2远程桌面服务安装配置和授权激活
1.安装 2.远程桌面授权激活 2.1 管理工具——远程桌面服务——(远程桌面授权管理)RD授权管理器: 2.2 由于RD授权服务器还未激活,所以授权服务器图标右下角显示红色×号: 点服务器展开——右 ...
- hackinglab 冒充登录用户
首先进入网页会发现 直接用bp进行抓包然后会发现一个字母是Login这个是登录的意思发现这个字母等于0我们大胆的猜测一下这个字母等于0代表的是没有登陆而如果这个字母是1或者是2的时候就是登录了然后我们 ...
- Catalyst9K设备介绍
Catalyst9K系列的里面包含了多款交换机,以及无线控制器,甚至包含了无线AP,如下将简单的介绍这几款产品的情况: 首先,这是一种总体的对应关系: 1.Catalyst9200 Series 主要 ...
- 集群Session一致性和同步问题
一. 何为session 用户使用网站的服务,基本上需要浏览器和web服务器进行多次交互,web服务器如何知道哪些请求是来自哪个会话的? 具体方式为:在会话开始时,分配一个唯一的会话标识(sessio ...
- git相关项目迁移
1). 从原地址克隆一份裸版本库,比如原本托管于 GitHub. git clone --bare git://github.com/username/project_old.git --bare 创 ...
- python连接oracle数据库报错"DatabaseError: DPI-1047: 64-bit Oracle Client library cannot be loaded: "解决方案
操作系统,python3.5, oracle_11, 均为64位:plsql 正常连接. 也顺利安装了cx_oracle 6.3,但是python进行连接的时候就会报错"DatabaseEr ...
- Jquery插件validate使用一则
jquery.validate是一个基于jquery的非常优秀的验证框架,可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法. 主要功能有: 验证url,email,number,len ...
- 页面布局 Wrap 组件 和 RaisedButton按钮
一.RaisedButton 定义一个按钮 Flutter 中通过 RaisedButton 定义一个按钮.RaisedButton 里面有很多的参数,只讲简单的进行使用. return Raised ...
- POJ - 1845 Sumdiv(分治)
题意:求$A^{B}$的所有约数之和$mod\ 9901$ 思路:由结论有,一个数$n$进行质因数分解得到$n={p_{1}}^{c_{1}} * {p_{2}}^{c_{2}} *...* {p_{ ...
- 【IO多路复用】
" 目录 一.IO模型介绍 二.阻塞IO(blocking IO) 三.非阻塞IO(non-blocking IO) 四.多路复用IO(IO multiplexing) 五.异步IO(Asy ...