CSS权重
2016-11-13 本文已影响148人
07120665a058
这篇是基于CSS选择器的，如果对选择器不太了解可以先看另一篇CSS选择器
（一）什么是CSS权重？
- 权重决定了你CSS规则怎样被浏览器解析直到生效，即你的CSS规则是怎样显示的
（二）权重之比
权重顺序 ：!important > 内联 > ID > 类 = 伪类 = 属性 > 标签(元素) = 伪元素 > 通配符
（三）怎么确定权重?
-
权重记忆口诀
-
从0开始：
-
一个
行内样式+ 1000； -
一个
ID+ 100； -
一个
属性/类/伪类+ 10； -
一个
元素/伪元素+ 1 -
NOTE：行内样式，指的是html文档中定义的style
-
NOTE：包含选择器的权重为：包含的选择器权重值之和
举例：
body #content .data img:hover
#content —— id选择器加了 100
.data —— class类选择器加了 10
:hover —— 伪类选择器加了 10
body 、img —— 元素加了 1
最终的权重值是 0122
按权重值排列
权重值| 选择器
----|----|----
0000|通用选择符 / 子选择符/继承的样式
0001|元素选择器
0010|属性选择器 / 类选择器 /伪类
0100|ID选择器
1000|行内样式
按选择器排列
| 选择器 | 表达式或示例 | 权重值 |
|---|---|---|
| ID选择器 | #aaa | 100 |
| 类选择器 | .aaa | 10 |
| 标签选择器 | h1 | 1 |
| 属性选择器 | [title] | 10 |
| 相邻选择器 | selecter + selecter | 拆分为两个选择器再计算 |
| 兄长选择器 | selecter ~ selecter | 拆分为两个选择器再计算 |
| 亲子选择器 | selecter > selecter | 拆分为两个选择器再计算 |
| 后代选择器 | selecter selecter | 拆分为两个选择器再计算 |
| 通配符选择器 | * | 0 |
| 各种伪类选择器 | 如:link， :visited， :hover， :active， :target， :root， :not... |
10 |
| 各种伪元素 | 如::first-letter,::first-line,::after,::before,::selection
|
1 |
（四）权重的基本规则
-
1、相同的权重：最后面出现的选择器为最后规则
假如在外部样式表中，同一个CSS规则你写了两次，那么出现在前面的选择器权重低，你的样式会选择后面的样式 -
2、不同的权重，权重值高则生效
选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高 -
我们可以利用 ID 来增加选择器权重
（五）对权重规则的总结
- 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D]
- A 表示内联样式，只有 1 或者 0 两个值
- B 表示规则中
ID的数量 - C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量
- D 表示规则中
标签和伪元素的数量
比较时从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位
!important注意点：- 如果多条规则中都对同一个属性指定了
!important，这时候!important的作用相互抵销，依然按照ABCD四组计算比较 -
!important的作用只有在具有唯一性时才能提现，但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了!important的属性，所以最好的办法就是不要使用
（六）CSS 优先级法则
- A )选择器都有一个权值，权值越大越优先
- B )当权值相等时，后出现的样式表要优于先出现的样式表设置
- C )继承(
inherit)的CSS 样式优先级低于指定的CSS 样式 - D )在同一组属性设置中标有“!important”规则的优先级最大
参考文章：
CSS权重
CSS选择器权重值的计算
