CSS属性的计算过程分为四步

确定声明值
层叠冲突
使用继承
使用默认值

确定声明值

开发人员在编程时，编写的样式表中给每个属性设置的值，如果有的属性没有声明，如果可以继承使用继承值，如果不能使用继承，使用浏览器的默认值

层叠冲突

层叠是CSS的特性之一，层叠是指相同样式多次作用于同一个元素时确定该样式的值的过程。
浏览器会根据以下规则进行计算

比较重要性
重要性从高到低分为

作者样式表中带 !import 的样式：带有import 的样式的优先级非常高，可以打破默认的优先级规则
作者样式表中的普通样式
浏览器默认样式表中的样式：作者样式表中没有相应属性的值时会使用该值

.mask {font-size: 18px !important;font-size: 20px;}

<div id="first" class="mask">这是一个DIV</div>

由此可见，带有import的样式的优先级更高，即便后面还有一个相同的样式仍不会被覆盖
2. 比较选择器的优先级
浏览器通过一个四位数进行计算

千位：如果有内联样式该值为1，没有该值为0
百位：该值等于所有ID选择器的数量
十位：该值等于选择器中所有类选择器、属性选择器和伪类选择器的数量
个位：该值等于伪元素选择器和元素选择器的数量

 #first {font-size: 30px;}.mask {font-size: 18px;font-size: 20px;}

 <div id="first" class="mask">这是一个DIV</div>

由此可见id选择器的优先级更高元素的样式为id选择器设置的样式，即便类选择器设置的样式写在后面。
同时，选择器的优先级不会因为该类选择器的数量的多少而发生变化，也就是说量变不会引起质变
3. 比较顺序
写在后面的样式优先

 .mask {font-size: 18px;font-size:20px;}

  <div class="mask">这是一个DIV</div>

由此可见后面的font-size属性生效此时的字体大小为20px

使用继承

继承值是在前面过程完成后还有样式没有值得情况下继承能进行继承的样式的值
通常情况下字体样式可以被继承

 .mask {font-size: 18px;}

        <div class="mask">这是一个DIV<p>这是一个段落</p></div>

由此可见没有给p元素设置字体的大小但是p中的字体大小和div中的字体大小相同，此时p继承了div元素中的font-size属性的值

使用默认值

该步骤是在前三个步骤完成后仍没有值的属性使用默认值

 <div id="first" class="mask">这是一个DIV</div>

由此可见即便没有设置任何样式，字体也同样有一定的大小，此时字体的大小使用的是默认的值

总结

CSS样式计算有四个步骤

确定声明值
层叠冲突
使用继承
使用默认值

选择器的优先级不会因为该类选择器的数量的大小而发生变化，即量变不会发生质变
带有!import的样式优先级非常高，可以打破计算规则

CSS样式的计算过程相关推荐

【CSS3 】css样式的计算calc属性
菜鸟速查 ------- CSS calc()函数应用场景:比如我们遇到如下需求: 要求:我们的元素的宽度永远比浏览器窗口小30px,要求子元素永远比父元素宽度小30px等等- 做法: .son{w ...
CSS 属性计算过程
CSS 属性计算过程你是否了解 CSS 的属性计算过程呢? 有的同学可能会讲,CSS属性我倒是知道,例如: p{color : red; } 上面的 CSS 代码中,p 是元素选择器,color 就 ...
18、CSS基础——属性值的计算过程
属性值的计算过程 1. 页面渲染浏览器的页面渲染方式: 一个元素一个元素依次渲染,顺序按照页面的树形目录结构进行即页面按照这种树形目录结构自根发散对元素依次进行渲染,元素一定是上一个渲染完后才渲染 ...
CSS基础（6）- 属性值的计算过程
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录属性值的计算过程参考资料属性值的计算过程一个元素一个元素依次渲染,顺序则是按照页面文 ...
css图片横向压缩,【css样式生成图片合并压缩工具】Sprite，你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...
CSS样式书写顺序与浏览器内部加载原理
CSS加载存在先后顺序,不严谨的书写顺序将会导致界面出现偏差.并且正确的书写顺序也可以提高代码的可读性. 正确的排序方式如下: (1)定位属性:position display float left ...
CSS样式属性（一）
字体样式 font-size:字号大小 font-size属性设置字号该属性的值可以使用相对长度单位也可以使用绝对长度单位其中相对长度单位比较常用推荐使用px像素单位相对长度单位说明 e ...
java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...
jq修改class_jQuery如何快速修改class属性和CSS样式
class属性修改类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个html元素只有一个class属性.但是class属性的值可以是多 ...

CSS样式的计算过程