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

每天学习一点点!!!

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

控制继承有5个属性值,分别:initial、inherit、revert、revert-layer、unset

作用如下:

  1. initial:设置元素某可继承属性为初始值
  2. inherit:设置元素某可继承属性与父元素相同;
  3. revert(英语)重置元素某可继承属性为浏览器默认样式;
  4. revert-layer(英语)重置 元素某继承属性为在上一个层叠层(@layer)中建立的值注意:如果当前规则不在 @layer 中,或者不存在上一层 @layer 中,revert-layer则等同于revert
  5. 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;
  }
}
相关推荐
JarvanMo6 分钟前
Flutter. FractionallySizedBox
前端
知识分享小能手1 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评1 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组1 小时前
React 组件基础与事件处理
前端·javascript·react.js
漂流瓶jz7 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码7 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v7 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
webYin8 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip8 小时前
结合Worker通知应用更新
前端·javascript
叶玳言8 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植