一尘不染

在CSS中,级联和继承有什么区别?

css

在CSS中,级联和继承有什么区别?

还是都是同一件事?


阅读 255

收藏
2020-05-16

共1个答案

一尘不染

继承 是关于属性如何从元素滴流到其子元素。某些属性,例如font- family继承。如果您在上设置了字体系列,则body该字体系列将被中的所有元素继承body。同样适用于color,但适用于backgroundheight始终默认为transparent和的情况则不适用auto。在大多数情况下,这很有意义。为什么背景会继承?那会很痛苦。如果字体不继承怎么办?那会是什么样子?

级联 是什么时候有冲突什么优先。级联的规则包括:

  1. 以后的属性会覆盖以前的属性
  2. 更具体的选择器会覆盖不太具体的选择器
  3. 指定的属性覆盖继承的属性

等等。级联解决了任何冲突情况。这是应用属性的顺序。


(更新) 特异性 是用于确定级联中选择器优先级的计算。当两个选择器应用于同一元素时,具有较高特异性的选择器优先。

  1. 内联样式具有很高的特异性(1000
  2. ID具有以下特征 100
  3. 类/属性和伪类添加 10
  4. 元素和伪元素添加 1

将选择器链中的所有部分加起来以确定总特异性。如果出现平局,则最后一个选择器优先。

当然,这些附带各种边缘情况和警告。一类将始终覆盖普通元素,无论有多少。具有更多针对性的选择器的优先级高于父选择器的继承属性。如果有人使用了,您可以扔掉所有的计算!important,这比一切都要重要。

2020-05-16