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比喻 ...
随机推荐
- [Android 4.4.2] 泛泰A850 Mokee4.4.2 20140509 RC2.0 by syhost
感谢: tenfar(R大师),zhaochengw(z大).windxixi(雪狐),xuefy(大星星).suky, cofface 感谢參考代码: Cyanogenmod , martincz ...
- 记忆化搜索 hdu 1331
Function Run Fun Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- DeepLearning to digit recognizer in kaggle
DeepLearning to digit recongnizer in kaggle 近期在看deeplearning,于是就找了kaggle上字符识别进行练习.这里我主要用两种工具箱进行求解.并比 ...
- dns tunnel 使用 nishang 下载TXT里的cmd(TXT里)实现CC command+ ceye实现数据外发
摘自:https://hk.saowen.com/a/a06909f1c57cb8452db969b3deede4151de42a7d69f4bb52c5bf027033fb91bd Powershe ...
- Head First 设计模式 —— 工厂模式与工厂方法
1. 实例化对象的方法 制造对象的方法不只 new 操作符一种.且实例化这个动作不应该总是公开地进行,还有初始化常常造成耦合问题.由此提出的工厂模式以进一步封装实例化的活动,且避免对象初始化时的可能产 ...
- [JavaEE] 了解Java连接池
转载自51CTO http://developer.51cto.com/art/201006/207768.htm 51CTO曾经为我们简单的介绍过Java连接池.要了解Java连接池我们先要了解数据 ...
- Java设计模式-策略模式详解
前言 在软件领域中,设计模式作为一种经典的开发实践常常需要我们去深入的理解,而策略模式作为设计模式的一种,使用频率也是相对来说比较高的,在Java中,当我们学习TreeSet集合的时候,就采用了经典的 ...
- PyQt5.9 Html与本地代码交互实例
在PyQt5.9中, 应用QWebEngineView和QWebChannel技术, 可以进行HTML与本地代码进行交互. 要点: 创建交互对象, 基于QObject, 定义信息槽 创建QWebCha ...
- Python迭代与递归方法实现斐波拉契数列
首先是迭代的方法实现: def f(n): f1, f2, fn = 1, 1, 1 while n>2: fn = f1 + f2 f1 = f2 f2 = fn n = n - 1 retu ...
- C - Unary(map)
Problem description Unary is a minimalistic Brainfuck dialect in which programs are written using on ...