这是我参与「第四届青训营」笔记创作活动的的第6天

CSS的继承性

CSS中，并不是所有的属性都会被继承下来，例如，大部分与盒子模型有关的属性，就无法被子元素继承下来。

具体CSS属性的继承性可以参考这篇文章(95条消息) CSS中哪些元素可以继承，哪些不可以继承qq_39125445的博客-CSDN博客块元素可以继承的属性是

显示继承

inherit

指定一个属性从父元素身上继承他的值。

中间的span之所以是绿色，正是因为它继承了父级元素中的color属性

initial

用于设置 CSS 属性为它的默认值

这里的 p 属性之所以不是红色，是因为 initial 将 p 的color属性重置为默认样式。

值得注意的是，这里的默认样式，是指该标签浏览器默认的样式，与父级无关。

unset

CSS 关键字 unset 可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于inherit，在第二种情况下（非继承属性）类似于initial。

第一种情况，属性可继承：

效果和上面的inherit一致。

第二种情况，属性不可继承：

按理来说，*通配符会将所有的盒子加上蓝色的边框，但是加上unset,中间的div2的边框颜色修改为默认的浏览器样式（黑色）

revert

表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于unset

兼容性: 只有safari9.1+和ios9.3+支持

all

表示重设除unicode-bidi和direction之外的所有CSS属性的属性值，取值只能是initial、inherit、unset和revert

兼容性: IE不支持，safari9-不支持，ios9.2-不支持，android4.4-不支持

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>all</title>
<style> 
html {
  font-size: small;
  color: blue;
}

#ex1 {
  background-color: yellow;
  color: red;
}

#ex2 {
  background-color: yellow;
  color: red;
  all: inherit;
}

#ex3 {
  background-color: yellow;
  color: red;
  all: initial;
}

#ex4 {
  background-color: yellow;
  color: red;
  all: unset;
}
</style>
</head>
<body>

<p>没有 all 属性:</p>
<div id="ex1">all</div>

<p>all: inherit:</p>
<div id="ex2">继承了 blue 和 small</div>

<p>all: initial:</p>
<div id="ex3">恢复到浏览器的默认样式</div>

<p>all: unset:</p>
<div id="ex4">这里的 unset 相当于 inherit</div>

</body>
</html>

结语

文章如果有不正确的地方，欢迎指正，共同学习，共同进步。

若有侵权，请联系作者删除。

CSS继承 | 青训营笔记