CSS07.属性值的计算过程

属性值的计算过程

• 概念：

  定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时：

  • 选择器相同，则执行层叠性

  • 选择器不同，就会出现优先级的问题。

1. 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是CSS　Specificity特殊性。

标签选择器	计算权重公式
继承或*	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个 !important 重要的	无穷大

• specificity用一个四位数，更像四个级别

• 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越、

• 关于CSS权重，我们需要一套公式来计算，这个就是CSS　Specificity（特殊性）

• div {
      color: pink!important;
  }

  /*标签选择器 小组长 0,0,0,1*/
  div {
      color: pink;
  }
  /*类选择器 班长 0,0,1,0*/
  .one {
      color: blue;
  }
  /*id选择器 班主任 0,1,0,0*/
  #two {
      color: green;
  }
  /*style=行内样式表 校长*1,0,0,0/

   

2）权重叠加

一个元素一个元素依此渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程

 

属性值计算过程简介：

1. 确定声明值：参考样式表中没有冲突的声明，作为CSS属性值

 

2. 层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值

• 比较重要性

• 比较特殊性

• 比较源次序

 

3. 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值

 

4. 使用默认值：对仍然没有值的属性，使用默认值

 

特殊的两个CSS取值：

• inherit：手动（强制）继承，将父元素的值取出应用到该元素

• initial：初始值，将该属性设置为默认值