当前位置: 首页 > news >正文

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

<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

.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;}
}
http://www.dtcms.com/a/255609.html

相关文章:

  • 阿里巴巴开源的 分布式事务解决方案Seata
  • 第六章 进阶24 小枫的学业
  • 软件测试题
  • DirectShowPlayerService::doRender: Unresolved error code 80040266
  • 【蓝牙】Qt4中向已配对的手机发送PDF文件
  • 《Go语言圣经》通过接口解耦包依赖
  • C++ 泛型编程利器:模板机制
  • OSCP备战-LordOfTheRoot靶机复现步骤
  • UniSAL:用于组织病理学图像分类的统一半监督主动学习方法|文献速递-深度学习医疗AI最新文献
  • 前端工程结构设计指南:如何让模块解耦、易维护、可拓展
  • 京东云 centos vim有操作混乱的问题
  • C/C++ 高频八股文面试题1000题(一)
  • AI 产品的“嵌点”(Embedded Touchpoints)
  • 考研英语作文评分标准专业批改
  • Llama 4模型卡片及提示词模板
  • 简单的 ​Flask​ 后端应用
  • 汽车加气站操作工考试题库含答案【最新】
  • 《棒球青训》打造几个国家级运动基地·棒球1号位
  • 阿里云OSS对象云储存入门操作
  • 【系统规划与管理师第二版】1.3 新一代信息技术及发展
  • [Java] 继承和多态
  • 【Python小练习】3D散点图
  • LeetCode 680.验证回文串 II
  • WinUI3开发_设置标题栏高度
  • .NET 4.7中使用NLog记录日志到数据库表
  • 通过Radius认证服务器实现飞塔/华为防火墙二次认证:原理、实践与安全价值解析
  • 非线性方程组求解:复杂情况下的数值方法
  • JavaScript Symbol 属性详解
  • GA3C(GPU/CPU混合式异步优势Actor-Critic)算法实现控制倒立摆
  • Cppcheck 使用教程:本地 + CMake + GitHub Actions 自动分析实战