CSS属性的计算过程

311 阅读1分钟

每个元素都有自己的默认样式。 属性值的计算顺序:

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

确认声明值

当我们在样式表中 给元素添加样式声明时,这个样式就会被当做CSS的属性值。

我们添加的样式,叫做作者样式,当作者样式和浏览器样式冲突时,会有限把作者样式中的声明值当做CSS的属性值。

层叠冲突

当样式表声明值有冲突时,就会使用层叠规则(选择器的权重)来确定CSS的属性值。

使用继承

如果作者样式里没有设置,那么会去看继承规则,关于字体的一些样式都可以继承

使用默认

到这一步,还没有的样式,就可以选择浏览器的默认样式了。

层叠规则

CSS:cascading style sheets,层叠样式表。 CSS优先级由以下因素决定:

  • 重要性-importance
  • 专用型-Specificity
  • 源代码次序Source order
  1. 重要性 !important的优先级最高,但是非必要不使用。

  2. 专用性 id选择器>类选择器>标签选择器 行内样式>内部样式>外部样式

  • 标签的style属性添加的样式,权重为1000;
  • ID选择器100
  • 类选择器10
  • 元素选择器或伪元素选择器1

通配符*,复合选择器(+,>,-,空格)和否定伪类,在专用性中无影响

  1. 源码次序 后面的会覆盖前面的。且父元素和子元素同时设了color,就近原则,使用子元素的。