CSS选择器权重问题
2018-09-19 22:05
113 查看
原则
原则一: 继承不如指定
原则二: #id > .class > 标签选择符
原则三:越具体越强大
原则四:标签#id >#id ; 标签.class > .class
CSS优先级权重计算法
CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!
根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下:
- 元素标签中定义的样式(Style属性),加1,0,0,0
- 每个ID选择符(如 #id),加0,1,0,0
- 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
- 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。
例子:
css文件或
h1 {color: red;} /* 一个元素选择符,结果是0,0,0,1 */ body h1 {color: green;} /* 两个元素选择符,结果是 0,0,0,2 */ h2.grape {color: purple;} /* 一个元素选择符、一个Class选择符,结果是 0,0,1,1*/ li#answer {color: navy;} /* 一个元素选择符,一个ID选择符,结果是0,1,0,1 */ 元素的style属性中如下定义: h1 {color: blue;} /* 元素标签中定义,一个元素选择符,结果是1,0,0,1*/如此以来,h1元素的颜色是蓝色。
注意:
1、!important声明的样式优先级最高,如果冲突再进行计算。
2、如果优先级相同,则选择最后出现的样式。
3、继承得到的样式的优先级最低。
结论是:比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数
important->内联->ID->类->标签|伪类|属性选择->伪对象->继承->通配符->继承
最后汇总为一张表
选择器 | 表达式或示例 说明 | 权重 |
---|---|---|
ID选择器 | #aaa | 100 |
类选择器 | .aaa | 10 |
标签选择器 h1 元素的tagName 1 | ||
属性选择器 | [title] | 10 |
相邻选择器 | selecter+selecter | 拆分为两个选择器再计算 |
兄长选择器 | selecter~selecter | 拆分为两个选择器再计算 |
父子选择器 | selecter>selecter | 拆分为两个选择器再计算 |
后代选择器 | selecter selecter | 拆分为两个选择器再计算 |
通配符 | * | 0 |
各种伪类选择器 | 如:link,:vusited,:hover,:active,:target,:root,:not等 | 10 |
各种伪元素 | 如::first-letter,::first-line,::after,::before,::selection | 1 |
相关文章推荐
- CSS选择器的权重问题
- CSS选择器优先级,权重问题
- css选择器以及权重问题
- CSS选择器的权重计算规则
- CSS选择器的权重计算
- 基于分解的多目标问题中均匀权重向量集合的生成
- CSS选择器效率问题
- 关于Android中权重问题
- Android中weight 出现权重大但是所占的比例小问题
- android学习遇到的问题之LinearLayout布局权重问题
- css中的权重计算,手风琴样式时遇到的问题
- 神经网络权重初始化问题
- 关于IE6下CSS选择器失效的问题
- CSS选择器效率问题
- CSS选择器的权重与优先规则
- CSS选择器的权重与优先规则
- css选择器优先级及权重计算
- 解决RecyclerView中不能使用权重的问题
- H5 28-优先级之权重问题
- css的层叠性:就是处理冲突的能力,所有的权重计算没有任何兼容问题。