3深入CSS|青训营

67 阅读1分钟

1. CSS 选择器的特异度

(选择器特殊的程度,越特殊的选择器,优先级越高)

id,.(伪)类,E标签

 

继承:某些属性会自动继承其父元素的计算值,除非显式指定一个值

初始值:

  • CSS中,每个属性都有一个初始值
  1. background-color 的初始值为transparent
  2. margin-left的初始值为0
  • 可以使用initial关键字显式重置为初始值 1.background-color:initial

DOM树,样式规则 ↓

  • filtering(对应用到该页面的规则用以下条件进行筛选:选择器匹配、属性有效、符合当前media等

↓(声明值)Declared Values,一个元素的某属性可能有0到多个声明值。比如:p{ font-size:16px}和p.text{ font-size:1.2em}

  • cascadin(按照来源、!important、选择器特异性、书写顺序等选出优先级最高的一个属性值

↓(层叠值)Cascaded Value,在层叠过程中,赢得优先级比赛的那个值,比如1.2em

  • defaulting(当层叠值为空的时候继承或初始值)

↓(指定值)Specified Value,经过cascading和defaulting之后,保证指定值一定不为空

  • resolving(将一些相对值或者关键字转化成绝对值,比如em转为px,相对路径转为绝对路径)

↓(计算值)Computed Value,一般来说是,浏览器会在不进行实际布局的情况下,所能得到的最具体的值。比如60%

  • formatting(将计算值进一步转换,比如关键字、百分比等都转为绝对值)

↓(使用值)Used Value,进行实际布局时使用的值,不会再有相对值或关键字。比如400.2px

  • constraining(将小数像素值转为整数)

↓(实际值)渲染时实际生效的值,比如400px