CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算
先看一段代码,如下:
``` <style>
a{
color: red;
}
#box a{
color: green;
}
[class="box"] a{
color: gold;
}
.box a{
color: brown;
}
p a{
color: yellow;
}
</style>
<p id='box' class="box"> <a>hello</a></p>
```
请问上面代码中,a
标签中文字的最终颜色是什么?知道CSS选择器优先级规则的童鞋都知道,在CSS中优先级顺序如下:
ID选择器 > class选择器 > tag选择器
所以,上面代码的颜色,大家都会选择#box a{ color: green;}
绿色。这个答案没错。 如果我们把这一条规则从style
标签中移除呢,那么a
标签文字的颜色应该是哪个?brown
? orgold
? Which one?
答案是: brown。
a{color:red}
和p a {color : yellow;}
的优先级肯定没有其它两项高,不需要考虑。在[class="box"] a
和.box a
中,后者的顺序比较考后,会覆盖之前的样式,所以颜色是brown
。
这也许会是一些人的答案,不能不说不对。那么如果这中情况下呢?
``` <style>
#box{
color: green;
}
</style>
<p id='box' class="box" style="color: red;"> hello </p>
```
不用说,大家都知道会使用style="color: red;"
属性定义的颜色,是red。
那么,css所遵从的具体规则是什么呢?
权重计算规则
- 第零等:
!important
, 大过了其它任何设置。 - 第一等:代表内联样式,如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为0100。
- 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
- 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
- 第五等:通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 第六等:继承的样式没有权值。
计算规则
!important
和内联样式style
都属于不讲理的那种,
- 只要存在
!important
,!important
便具有最高优先级; - 如果不存在
!important
,存在style
,那么style
便具有最高优先级; - 剩下的 “ID” 、 “类,伪类和属性” 、 “元素类型和伪元素“ 分别对应 权重值(0-a-b-c)中的 a/b/c;计算方法如下:
* /* a=0 b=0 c=0 -> specificity = 0-0-0-0 */
LI /* a=0 b=0 c=1 -> specificity = 0-0-0-1 */
UL LI /* a=0 b=0 c=2 -> specificity = 0-0-0-2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 0-0-0-3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 0-0-1-1 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 0-0-1-3 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 0-0-2-1 */
#x34y /* a=1 b=0 c=0 -> specificity = 0-1-0-0 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 0-1-0-1 */
- 继承的样式没有权值,比其它任何类型的权值都低。
【参考资料】
CSS中选择器优先级的权重计算的更多相关文章
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- 【CSS】选择器优先级
CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...
- 关于css中选择器的小归纳(一)
关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...
- CSS(二)- 选择器 - 一定要搞懂的选择器优先级和权重问题
css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛.直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中 ...
- 层叠机制和继承的概念以及CSS中选择器的优先级
层叠机制: 一个元素的某个特定的样式属性可能来自行间的style属性.内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- 【CSS系列-选择器优先级总结】
转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
随机推荐
- 【跟我一起学Unity3D】做一个2D的90坦克大战之AI系统
对于AI,我的初始想法非常easy,首先他要能动,而且是在地图里面动. 懂得撞墙后转弯,然后懂得射击,其它的没有了,基于这个想法,我首先创建了一个MyTank类,用于管理玩家的坦克的活动,然后创建AI ...
- 软件project师周兆熊给IT学子的倾情奉献
[来信] 贺老师: 你好,我是中兴通讯的一名软件开发project师,名叫周兆熊. 近期看了您的新书<逆袭大学:传给IT学子的正能量>,感觉你真心为当代学子答疑解惑.非常值得敬佩! 从上大 ...
- 分享一个android仿ios桌面卸载的图标抖动动画
直接上代码,如有更好的,还请不吝赐教 <span style="font-size:18px;"><?xml version="1.0" en ...
- Unity3D 射线指定层获取GameObject 注意 LayerMask
这一篇是纯技术讨论,看过我前面文章的童鞋应该清楚,我的奔跑是靠鼠标响应的,鼠标点到哪就跑到哪,后来又有了界面,麻烦就来了,我的界面居然能点 穿.我不希望点界面的时候还能点到界面后面的地面上,角色傻不拉 ...
- objective-c 中数据类型之四 字典(NSDictionary)
// 1. 字典初始化.赋值方式1 NSMutableDictionary *m_dictionary = [[NSMutableDictionary alloc] initWithCapacity: ...
- UVa 572 - Oil Deposits (简单dfs)
Description GeoSurvComp地质调查公司负责探測地下石油储藏. GeoSurvComp如今在一块矩形区域探測石油.并把这个大区域分成了非常多小块.他们通过专业设备.来分析每一个小块中 ...
- devenv.exe 编译Solution
Build https://docs.microsoft.com/en-us/visualstudio/ide/reference/build-devenv-exe Builds a solution ...
- Spring中JdbcTemplate中使用RowMapper
转自:https://blog.csdn.net/u012661010/article/details/70049633 1 sping中的RowMapper可以将数据中的每一行数据封装成用户定义的类 ...
- 微信小程序蓝牙连接小票打印机
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAda ...
- Java中利用随机数的猜拳游戏
Java中利用随机数的猜拳游戏,实现非常简单,重难点在于随机数的产生. 首先GameJude类是用于判断输赢的一个类: package testGame; public class GameJudge ...