属性继承/属性优先级 · 前端

# 继承/属性优先级 ## 属性优先级 1. 元素选择器<类选择器<ID选择器<写在元素标签里面<!important。 2. 如果优先级相同那么后来的覆盖前面的。 ~~~ <style> #outer { position: relative; height: 500px; width: 500px; background-color: red; } .inner{ position: absolute; height: 300px; width: 300px; background-color: yellow; } .pp{ background-color: blueviolet !important; } </style> <div class="pp" id="outer" style="background-color:green"> <div class="inner"></div> </div> ~~~ ## 继承 > 对 font-family 和 color 进行继承是有意义的，因为这使得您可以很容易地设置一个站点范围的基本字体，方法是应用一个字体到html元素。然后，您可以在需要的地方覆盖单个元素的字体。如果要在每个元素上分别设置基本字体，那就太麻烦了。再如，让 margin，padding，border 和 background-image 不被继承是有意义的。想象一下，如果您将这些属性设置在一个容器元素上，并将它们继承到每个子元素，然后不得不将它们全部放在每个单独的元素上，那么将会出现的样式/布局混乱。四个通用属性值： 1. inherit：该值将应用到选定元素的属性值设置为与其父元素一样。 2. initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。 3. unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。 4. revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置），否则属性值被设置成用户代理的默认样式。例如： ~~~ <ul> <li>Default <a href="#">link</a> color</li> <li class="inherit">Inherit the <a href="#">link</a> color</li> <li class="initial">Reset the <a href="#">link</a> color</li> <li class="unset">Unset the <a href="#">link</a> color</li> </ul> body { color: green; } .inherit a { color: inherit; } .initial a { color: initial } .unset a { color: unset; } ~~~ 我们首先设置<body> 的color为绿色。由于color属性是自然继承的，所有的body子元素都会有相同的绿色。需要注意的是默认情况下浏览器设置链接的颜色为蓝色，而不是自然继承color属性，因此在我们列表中的第一个链接是蓝色的。第二个规则设置一个类 inherit 的元素内的链接，并从父类继承它的颜色。在这种情况下, 意思是说链接继承了父元素li的颜色，默认情况下li的颜色来自于它的父元素 ul , 最后ul 继承自 body元素，而body的color 根据第一条规则设置成了绿色。第三个规则选择了在元素上使用类 initial 的任意链接然后设置他们的颜色为 initial 。通常， initial 的值被浏览器设置成了黑色，因此该链接被设置成了黑色。最后一个规则选择了在元素上使用类 unset 的所有链接然后设置它们的颜色为 unset ——即我们不设置值。因为color属性是一个自然继承的属性，它实际上就像把值设置成 inherit 一样。结果是，该链接被设置成了与body一样的颜色——绿色。