initial、inherit、unset、revert和all的区别
initial
表示元素属性的初始默认值(该默认值由官方CSS规范定义)
示例
<p><span>This text is red.</span><em>This text is in the initial color (typically black).</em><span>This is red again.</span>
</p>
p {color: red;
}em {color: initial;
}
inherit
表示元素的直接父元素对应属性的计算值,inherit 关键字只是增强了属性的默认行为,通常只在覆盖原有的值的时候使用。继承始终来自文档树中的父元素,即使父元素不是包含块。
/* 设置二级标题的颜色为绿色 */
h2 { color: green; }/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 { color: inherit; }
unset
unset相对于initial和inherit而言,相对复杂一点。表示如果该属性默认可继承,则值为inherit;否则值为initial。实际上,设置unset相当于不设置
<p>This text is red.</p>
<div class="foo"><p>This text is also red.</p>
</div>
<div class="bar"><p>This text is green (default inherited value).</p>
</div>
.foo {color: blue;
}
.bar {color: green;
}p {color: red;
}
.bar p {color: unset;
}
revert
表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置,则按此设置;否则,按照浏览器定义样式表中的样式设置;否则,等价于unset
<h3 style="font-weight: revert; color: revert;">This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>
h3 {font-weight: normal;color: blue;
}
all
表示重设除unicode-bidi和direction之外的所有CSS属性的属性值,取值只能是initial、inherit、unset和revert
<style>
.test{border: 1px solid black;padding: 20px;color: red;
}
.in{/* all: initial;all: inherit;all: unset;all: revert; */
}
</style>
<div class="test"><div class="in">测试文字</div>
</div>
initial、inherit、unset、revert和all的区别相关推荐
- Update item to this version和Revert to this version区别
版权声明:本文为博主原创文章,转载请注明出处.更多精彩文章请关注微信公众号:写代码的苏东坡. https://blog.csdn.net/shihengzhen101/article/details/ ...
- SVN中update to revision与revert to revision的区别
2013年08月03日 ⁄ 综合 ⁄ 共 424字 ⁄ 字号 小 中 大 ⁄ 评论关闭 转载请注明,来自:http://blog.csdn.net/skyman_2001 update to revi ...
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS 样式的 initial(默认)和 inherit(继承)以及 unset
经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其 ...
- CSS 关键字 initial、inherit 和 unset
经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其 ...
- 谈谈 CSS 关键字 initial、inherit 和 unset
经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其 ...
- CSS的all(属性) 笔记
测试代码 <!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf- ...
- css不换行属性_那些不常见,但却非常实用的css属性(整理不易)
1.-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数.并且在超过行数后,在最后一行显示"..." 这是正常的展示 display: -webkit-b ...
- css不换行属性_那些不常见,但却非常实用的 css 属性
作者:寒水寺一禅 人类身份验证 - SegmentFaultsegmentfault.com 1.-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数.并且在超过行数后,在 ...
最新文章
- 小目标检测、图像分类、图像识别等开源数据集汇总
- STL 之count,count_if,max,max_element,min,min_element和random_shuffle
- HUT-1694 零用钱 贪心
- 全新互联网四通手机震撼上市
- Python的系统管理_08_python_异常处理
- Android Touch 事件的分发和消费机制
- 如何将pdf文件转换成可以编辑的文档
- cad插入块_CAD施工制图常见问答(一)
- 文本挖掘系列之文本信息抽取
- 何谓差模信号?何谓共模信号?
- R语言wmf矢量图片导出大片空白及搜索网站
- 关于汽车诊断OBD的理解(ISO15031-5)
- 日志收集之--将Kafka数据导入elasticsearch
- 用 Python selenium爬取股票新闻并存入mysql数据库中带翻页功能demo可下载
- 给大家推荐一首好听的流行音乐
- 财务共享建设后,为什么比别人效率低,因为忽略了这个关键点
- DNS_PROBE_FINISHED_NXDOMAIN完美解决办法
- java 阈值 告警_处理Java异常告警最佳实践
- uml图六种箭头的含义(泛化、实现、依赖、关联、聚合、组合)
- iOS VIPER 架构解读
热门文章
- 改动实体类后,报错java.io.InvalidClassException: XXXDTO; local class incompatibl
- HashMap面试题,看这一篇就够了!
- 【Python】浮点数精度问题(包含解决方案)
- DOXYGEN简明实用教程
- 扫雷游戏软件测试,软件测试
- 转行程序员日记---2020-10-16【最近有点累】
- javaftp读取服务器文件,java读取ftp服务器文件
- C语言 深度剖析数据在内存中的存储(2)
- 一分钟教你配置DHCP服务,超级简单一看就会!!!!!
- 基础知识【H5新增知识1】