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的区别相关推荐

  1. Update item to this version和Revert to this version区别

    版权声明:本文为博主原创文章,转载请注明出处.更多精彩文章请关注微信公众号:写代码的苏东坡. https://blog.csdn.net/shihengzhen101/article/details/ ...

  2. SVN中update to revision与revert to revision的区别

    2013年08月03日 ⁄ 综合 ⁄ 共 424字 ⁄ 字号 小 中 大 ⁄ 评论关闭 转载请注明,来自:http://blog.csdn.net/skyman_2001 update to revi ...

  3. 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. CSS 样式的 initial(默认)和 inherit(继承)以及 unset

    经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其 ...

  5. CSS 关键字 initial、inherit 和 unset

    经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其 ...

  6. 谈谈 CSS 关键字 initial、inherit 和 unset

    经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其 ...

  7. CSS的all(属性) 笔记

    测试代码 <!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf- ...

  8. css不换行属性_那些不常见,但却非常实用的css属性(整理不易)

    1.-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数.并且在超过行数后,在最后一行显示"..." 这是正常的展示 display: -webkit-b ...

  9. css不换行属性_那些不常见,但却非常实用的 css 属性

    作者:寒水寺一禅 人类身份验证 - SegmentFault​segmentfault.com 1.-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数.并且在超过行数后,在 ...

最新文章

  1. 基于深度法向约束的稀疏雷达数据深度补全(商汤科技和香港大学联合提出)
  2. python编译so
  3. [MFC] MFC 打开HTML资源(用ID版,也可加载到自己的web控件上)
  4. Acwing291. 蒙德里安的梦想:状态压缩dp
  5. VC6开发视频监控ActiveX控件总结
  6. An example of parsing xml file using Scala
  7. 基于matlab的车牌识别系统程序,基于matlab的车牌识别系统的设计(附程序).doc
  8. Win7下使用U盘安装linux Ubuntu16.04双系统图文教程
  9. 有十五个数按由大到小顺序存放在一个数组中_「图形化编程」前导知识-数组(一)...
  10. Spring-发送QQ邮件
  11. zookeeper源码-分布式锁
  12. ajax中sy,黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求
  13. Termux,安装Aria2 实现BT下载功能
  14. 【AR】AR 的几种底层实现方式
  15. 视频教程-微信公众平台深度开发v2.0第3季——二维码、模板消息-微信开发
  16. python语言程序设计习题
  17. CISCO思科考试考生注册指导手册
  18. 用 CPU 烤出来的肉,会特别香吗?
  19. 7-4 平面向量加法 (15 分)---->c语言的深度刨析
  20. AMD EPYC CPU物理机之core(云主机最大可使用内核数)售卖机制 ---- NUMA and NPS使用

热门文章

  1. caffe层解读系列——Data以及ImageData层用法
  2. 安装yolov5时,遇到的问题
  3. 实验七 函数程序设计 张玉生《C语言程序设计实训教程》双色版 配套实验书答案 (纯手打, 仅供参考)
  4. 转 FTP搜索引擎的设计与实现(优化版)
  5. 安装程序出现 NSIS ERROR的错误提示
  6. OpenInfra峰会首度落地中国,中国OpenStack方兴未艾
  7. 我们到底该不该去初创公司上班?
  8. SQLite源代码分析----------分词器②
  9. 2019数字中台/CRM 十大新闻出炉:期待企业服务大变局!
  10. iPhone游戏开发