前端学习笔记05---initial、inherit和unset的理解
1、initial、inherit和unset。文字其实好理解，但是一个样例让我迷惑了。
initial就是设置该属性为默认值，就是设置为该属性它没有任何样式时在浏览器中断初始表现。一般用于堆自然继承的属性让他不继承。
inherit就是让它继承。不过只能继承父级的，不能跨级。
unset就是我啥也不设置，这个属性本来可以继承就继承，不可以继承就不继承。看起来多此一举，可能是在js里面实现动态变化的吧，目前还没想到有啥用。
让我迷惑的例子：
body {
color: green;
}
.my-class-1 a {
color: inherit;
}
.my-class-2 a {
color: initial;
}
.my-class-3 a {
color: unset;
}
<body>
<ul>
<li>Default <a href="#">link</a> color</li>
<li class="my-class-1">Inherit the <a href="#">link</a> color</li>
<li class="my-class-2">Reset the <a href="#">link</a> color</li>
<li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>
</body>
按理来说color属性时自然继承的，就是默认是可以继承的。然后这样的一个代码在firefox里面的表现是第一行a是紫色的，第二行a是绿色的，第三行a竟然不是紫色而是黑色？第四行也好理解就是绿色。
排除我是色盲的原因，第三条到底为什么不是默认的紫色，我想不通的用border（不能继承）测了一遍，是完美的和我的理解，但这a为什么不合理解。
经过我的思考，目前我理解的原因是：mdn上说initial是设置为浏览器的默认样式，那么现在第三条就是默认样式，而第一条它不是默认样式，就是说在a里面的字体颜色有它自己的独特color样式使得它变成了紫色。或者简单来说就是a元素的文字颜色它默认的是紫色，而浏览器的默认color颜色是黑色（可以用其他元素测测看浏览器默认是否是黑色）。所以结论是initial是设置为浏览器的默认样式，他不管你是什么元素，只单看这个属性。这个默认值好像是css规范定的，而各个元素在各个浏览器里面都有自己独特的样式，所以initial设置的应该是那个规范定的默认值吧。
再理解一下：initial设置属性和浏览器默认样式相同，不是设置为和该属性位置的元素的属性默认样式相同。
浙公网安备 33010602011771号