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? or gold? 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所遵从的具体规则是什么呢?

权重计算规则

  1. 第零等:!important, 大过了其它任何设置。
  2. 第一等:代表内联样式,如: style=””,权值为1000。
  3. 第二等:代表ID选择器,如:#content,权值为0100。
  4. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
  5. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
  6. 第五等:通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  7. 第六等:继承的样式没有权值。

计算规则

!important 和内联样式style都属于不讲理的那种,

  • 只要存在 !important!important便具有最高优先级;
  • 如果不存在 !important,存在style,那么style便具有最高优先级;
  • 剩下的 “ID” 、 “类,伪类和属性” 、 “元素类型和伪元素“ 分别对应 权重值(0-a-b-c)中的 a/b/c;计算方法如下:

* /* a=0 b=0 c=0 -&gt; specificity = 0-0-0-0 */
LI /* a=0 b=0 c=1 -&gt; specificity = 0-0-0-1 */
UL LI /* a=0 b=0 c=2 -&gt; specificity = 0-0-0-2 */
UL OL+LI /* a=0 b=0 c=3 -&gt; specificity = 0-0-0-3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -&gt; specificity = 0-0-1-1 */
UL OL LI.red /* a=0 b=1 c=3 -&gt; specificity = 0-0-1-3 */
LI.red.level /* a=0 b=2 c=1 -&gt; specificity = 0-0-2-1 */
#x34y /* a=1 b=0 c=0 -&gt; specificity = 0-1-0-0 */
#s12:not(FOO) /* a=1 b=0 c=1 -&gt; specificity = 0-1-0-1 */
  • 继承的样式没有权值,比其它任何类型的权值都低。

【参考资料】

CSS selector specificity

CSS中选择器优先级的权重计算的更多相关文章

  1. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  2. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  3. 【CSS】选择器优先级

    CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...

  4. 关于css中选择器的小归纳(一)

    关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...

  5. CSS(二)- 选择器 - 一定要搞懂的选择器优先级和权重问题

    css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛.直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中 ...

  6. 层叠机制和继承的概念以及CSS中选择器的优先级

    层叠机制: 一个元素的某个特定的样式属性可能来自行间的style属性.内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的 ...

  7. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  8. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...

  9. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

随机推荐

  1. 【跟我一起学Unity3D】做一个2D的90坦克大战之AI系统

    对于AI,我的初始想法非常easy,首先他要能动,而且是在地图里面动. 懂得撞墙后转弯,然后懂得射击,其它的没有了,基于这个想法,我首先创建了一个MyTank类,用于管理玩家的坦克的活动,然后创建AI ...

  2. 软件project师周兆熊给IT学子的倾情奉献

    [来信] 贺老师: 你好,我是中兴通讯的一名软件开发project师,名叫周兆熊. 近期看了您的新书<逆袭大学:传给IT学子的正能量>,感觉你真心为当代学子答疑解惑.非常值得敬佩! 从上大 ...

  3. 分享一个android仿ios桌面卸载的图标抖动动画

    直接上代码,如有更好的,还请不吝赐教 <span style="font-size:18px;"><?xml version="1.0" en ...

  4. Unity3D 射线指定层获取GameObject 注意 LayerMask

    这一篇是纯技术讨论,看过我前面文章的童鞋应该清楚,我的奔跑是靠鼠标响应的,鼠标点到哪就跑到哪,后来又有了界面,麻烦就来了,我的界面居然能点 穿.我不希望点界面的时候还能点到界面后面的地面上,角色傻不拉 ...

  5. objective-c 中数据类型之四 字典(NSDictionary)

    // 1. 字典初始化.赋值方式1 NSMutableDictionary *m_dictionary = [[NSMutableDictionary alloc] initWithCapacity: ...

  6. UVa 572 - Oil Deposits (简单dfs)

    Description GeoSurvComp地质调查公司负责探測地下石油储藏. GeoSurvComp如今在一块矩形区域探測石油.并把这个大区域分成了非常多小块.他们通过专业设备.来分析每一个小块中 ...

  7. devenv.exe 编译Solution

    Build https://docs.microsoft.com/en-us/visualstudio/ide/reference/build-devenv-exe Builds a solution ...

  8. Spring中JdbcTemplate中使用RowMapper

    转自:https://blog.csdn.net/u012661010/article/details/70049633 1 sping中的RowMapper可以将数据中的每一行数据封装成用户定义的类 ...

  9. 微信小程序蓝牙连接小票打印机

    1.连接蓝牙 (第一次发表博客)   第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAda ...

  10. Java中利用随机数的猜拳游戏

    Java中利用随机数的猜拳游戏,实现非常简单,重难点在于随机数的产生. 首先GameJude类是用于判断输赢的一个类: package testGame; public class GameJudge ...