CSS中的样式层叠机制Cascade
2017-12-13 12:45
381 查看
CSS中的样式层叠机制Cascade
文章博客园地址一、样式冲突
样式冲突是CSS渲染过程要解决的一个关键问题,样式冲突主要由两个原因造成:元素包含了不同对象所赋予的样式:浏览器、用户、作者。其中,浏览器样式是指不对元素赋予样式时,元素所表现出来的样式,也就是浏览器赋予的元素默认样式;用户样式是指用户通过浏览器插件设定的样式,比如色弱者会对文字颜色进行修改;作者样式只是程序员所编写的CSS样式。
程序员经常会在CSS中对同一元素进行重复定义,这往往是因为程序员整体局部的样式编写习惯造成的,当然这是好的习惯。
二、Cascade机制
CSS设计了Cascade机制通过确定样式层叠的顺序来解决样式冲突的问题,其过程就是对所有冲突样式按照其对应的优先级进行排序,然后确定优先级最高样式为最终渲染样式。我将该排序过程归纳为三个级联的排序阶段。Step1. 对所有冲突样式,按照设定其的对象优先级顺序进行排序;对象优先级顺序如下:
1.读者样式+!important 2.作者样式+!important 3.默认样式+!important 4.作者样式 5.读者样式 6.默认样式
Step2. 对Step1中优先级相等的作者样式(作者样式+!important优先级、作者样式优先级)再分别按照样式Specificity值从大到小进行二次排序;
Step3. 对优先级相等的样式最后按照申明时间从早到晚进行排序。
三、Specificity值的计算方式
Specificity可以看成是一个∞进制的4位数。作者样式的Specificity值由定义其的选择器决定,下表展示了各种选择器所定义的样式、HTML中的样式、继承样式的Specificity值对照表。组合选择器(E F,
E>F,
E+F,
E~F)的Specificity值等于所有单选择器Specificity值的累加和。比如
div.aside p的权Specificity值
=(0,0,0,1)+(0,0,1,0)+(0,0,0,1)=(0,0,1,2);11个元素选择器的Specificity值
(0,0,0,11)比一个类选择的Specificity值
(0,0,1,0)小。
Selector | type Example | Specificity |
---|---|---|
通用选择器 | * | 0,0,0,0 |
元素选择器 | div | 0,0,0,1 |
伪元素选择器 | ::first-line | 0,0,0,1 |
类选择器 | .warning | 0,0,1,0 |
伪类选择器] | :hover | 0,0,1,0 |
属性选择器 | [type=”checkbox”] | 0,0,1,0 |
id选择器 | content | 0,1,0,0 |
HTML中的样式 | style=”color: red;” | 1,0,0,0 |
继承样式 | —— | 0,0,0,0 |
更详细的CSS选择器介绍请见延伸阅读[1],伪类与伪元素的区别分析请见延伸阅读[2]。
延伸阅读:
[1] CSS选择器备忘录
[2] 伪类与伪元素的区别
参考资料:
[1] CSS Pocket Reference
相关文章推荐
- html css层叠样式基础(常用选择器)(三)
- CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨
- CSS样式优先级机制
- Css的三大机制(特性):特殊性、继承、层叠详解
- CSS 的优先级机制(无法覆盖bootstrap的样式)
- css层叠样式详解
- CSS层叠样式温故第一天
- CSS层叠样式的学习[1]
- CSS 之 样式优先级机制
- 精通CSS(层叠样式单)语法请帮忙看看
- css 样式层叠规则
- css笔记06:层叠样式选择器
- HTML5的标签和CSS层叠样式
- html css层叠样式基础(一)
- 【css】关于层叠样式的基础
- css多重样式将层叠为一个
- css 样式层叠的特点
- css案例学习之层叠样式
- css层叠样式的次序y
- CSS层叠样式的主次顺序