CSS知识补充 --- 控制继承

每天学习一点点！！！

总所周知，CSS某些属性可以继承，然后今天看到MDN的时候看到了CSS也可以控制继承，感觉很有意思，所以记录一下：

控制继承有5个属性值，分别：initial、inherit、revert、revert-layer、unset；

作用如下：

initial：设置元素某可继承属性为初始值；
inherit：设置元素某可继承属性与父元素相同；
revert(英语)：重置元素某可继承属性为浏览器默认样式；
revert-layer(英语)：重置元素某继承属性为在上一个层叠层(@layer)中建立的值 ；注意：如果当前规则不在 @layer 中，或者不存在上一层 @layer 中，revert-layer则等同于revert；
unset：重置元素某继承属性为自然值；

例子

HTML

html 复制代码

<div class="test-MDN-index">
  <h2>test-控制继承</h2>
  <ul>
    <li class="li-initial">
      测试控制继承 <a href="#">a标签color: initial</a> 属性值
    </li>
    <li class="li-inherit">
      测试控制继承 <a href="#">a标签color: inherit</a> 属性值
    </li>
    <li class="li-revert">
      测试控制继承 <a href="#">a标签color: revert</a> 属性值
    </li>
    <li class="li-revert-layer">
      测试控制继承 <a href="#">a标签color: revert-layer</a> 属性值
    </li>
    <li class="li-unset">
      测试控制继承 <a href="#">a标签color: unset</a> 属性值
    </li>
  </ul>
</div>

CSS

css 复制代码

.test-MDN-index {
  color: green;
}
ul {
  color: red;
}
.li-initial a {
  color: initial;
}
.li-inherit a {
  color: inherit;
}
.li-revert a {
  color: revert;
}
.li-revert-layer a {
  color: revert-layer;
}
.li-unset a {
  color: unset;
}
@layer test {
  .li-revert-layer a {
    color: purple;
  }
}