什么是优先级继承 优先级的继承方式

什么是优先级继承

优先级继承是CSS文档定义一个元素的样式属性值没有被明确指定时，将从该元素的父元素继承一个样式属性值的过程。优先级继承是CSS中非常重要的一个概念，也是基于优先级继承原则，我们可以更加轻松便利地设置样式属性值。

如何确定继承的优先级

CSS文档对于优先级的规定为：如果同一个元素上多个样式属性值被定义了，最终使用的将是计算权重之后的优先级最高的样式属性值。而在父元素和子元素之间传递时，如果它是一个继承的属性，那么它将继承最近的祖先元素的该属性值。

一般来说，优先级的计算规则是：样式属性值的定义方式越详细，权重越高。例如，定义样式的方式为#对应的ID选择器的优先级高于.class对应的class选择器的优先级，而选择器中含有伪元素的优先级最高。

优先级继承的例子

优先级继承的一个典型例子就是CSS的文字颜色设置。在一个网站的正文部分，我们一般都会让文本以黑色显示。但是当我们需要对某段文字进行特殊的强调时，我们可能需要改变它的颜色。在这种情况下，我们会使用CSS的color属性来设置文字的颜色。如果我们不想对所有的文本都进行单独的颜色设置，而只是想在某些文本中进行颜色设置，那么我们可以这样设置样式：

p {
  color: black;
em {
  color: red;

在这个例子中，我们通过为p元素声明color属性，使正文段落中的文字颜色为黑色，然后为em元素声明color属性，使得强调文字的颜色为红色。由于这个代码的字号属性被定义在p元素中，而em元素又是p元素的子元素，所以em元素会继承p元素的color属性值，并将其应用到自己身上。

优先级继承的注意事项

虽然优先级继承是CSS中一个方便的属性，但是一些需要特别注意的事项也是非常重要的。首先，我们需要认识到并不是所有的样式属性都可以被继承，例如border等就不能被继承。其次，我们需要注意到样式的继承顺序，也就是父元素的样式属性值会覆盖祖先元素中的同名样式属性值。

最后，我们需要谨慎地使用继承机制。因为CSSText属性并不是通用的方式，所以会因为浏览器兼容问题而带来麻烦，并导致在某些情况下CSS未被正确地继承。因此，我们应该尽量避免使用cssText属性。