inherit:继承父类。

initial:继承浏览器。

unset:重置为自然值,继承父类或者浏览器。

revert:恢复原来的值。

详解:

CSS为处理继承提供了四种特殊的通用属性值:

  • inherit: 该值将应用到选定元素的属性值设置为与其父元素一样。
  • initial :该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值,并且该属性是自然继承的,那么该属性值就被设置为 inherit
  • unset :该值将属性重置为其自然值,即如果属性是自然继承的,那么它就表现得像 inherit,否则就是表现得像 initial
  • revert :如果当前的节点没有应用任何样式,则将该属性恢复到它所拥有的值。换句话说,属性值被设置成自定义样式所定义的属性(如果被设置), 否则属性值被设置成用户代理的默认样式。

注意: initial 和 unset 不被IE支持。

inherit 值是最有趣的——它允许我们显式地让一个元素从其父类继承一个属性值。

让我们看一个例子。首先有以下一段HTML:

  1. <ul>
  2. <li>Default <a href="#">link</a> color</li>
  3. <li class="inherit">Inherit the <a href="#">link</a> color</li>
  4. <li class="initial">Reset the <a href="#">link</a> color</li>
  5. <li class="unset">Unset the <a href="#">link</a> color</li>
  6. </ul>

现在用CSS给它添加样式:

  1. body {
  2. color: green;
  3. }
  4.  
  5. .inherit a {
  6. color: inherit;
  7. }
  8.  
  9. .initial a {
  10. color: initial
  11. }
  12.  
  13. .unset a {
  14. color: unset;
  15. }

Result:

 

让我们解释这里发生了什么:

  • 我们首先设置<body> 的color为绿色。
  • 由于color属性是自然继承的,所有的body子元素都会有相同的绿色。需要注意的是默认情况下浏览器设置链接的颜色为蓝色,而不是自然继承color属性,因此在我们列表中的第一个链接是蓝色的。
  • 第二个规则设置一个类 inherit 的元素内的链接,并从父类继承它的颜色。在这种情况下, 意思是说链接继承了父元素<li>的颜色,默认情况下<li>的颜色来自于它的父元素 <ul> , 最后<ul> 继承自 <body>元素,而<body>color 根据第一条规则设置成了绿色。
  • 第三个规则选择了在元素上使用类 initial 的任意链接然后设置他们的颜色为 initial 。通常, initial 的值被浏览器设置成了黑色,因此该链接被设置成了黑色。
  • 最后一个规则选择了在元素上使用类 unset 的所有链接然后设置它们的颜色为 unset  ——即我们不设置值。因为color属性是一个自然继承的属性,它实际上就像把值设置成 inherit 一样。结果是,该链接被设置成了与body一样的颜色——绿色。

链接:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

css控制继承的更多相关文章

  1. css 可继承属性 display:inline-block 历史

    1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...

  2. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  3. js,css控制网页内容不让选中和复制

    ---恢复内容开始--- JS, CSS控制网页内容不让选择和复制 CSS 控制: <style> body{ -moz-user-select:none;//针对火狐浏览器,谷歌则-we ...

  4. CSS系列:CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  5. CSS控制表格(table)样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  6. CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...

  7. CSS控制XML与通过js解析xml然后通过html显示xml中的数据

    使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...

  8. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  9. js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. CodeFroces--Joseph’s Problem

    题目意思:给出n k 求  k%1 + k%2 +k%3+...+k%n 的和 利用分块的思想 我们知道 k%i ==k-k/i*i 同时 一段连续的区间的 k/i 是相等的 #include< ...

  2. CF528D Fuzzy Search

    题意:给定k,只含有ACGT的字符串S和T,求T在S中出现了多少次. 字符匹配:如果S的[i - k, i + k]中有字符x,那么第i位可以匹配x. 解: 首先预处理:f[i][j]表示S的第i位能 ...

  3. WebAPI集成SignalR

    WebAPI提供通用数据接口,SignalR提供实时消息传输,两者可以根据实际业务需求进行组合. 环境 版本 操作系统 Windows 10 prefessional 编译器 Visual Studi ...

  4. T4模版 mysql

    MysqlDbhelper.ttinclude <#@ assembly name="System.Core"#> <#@ assembly name=" ...

  5. smartProgram学习笔记

    背景:转正前要完成这样一个编程课的学习.平时写代码只是完成基本的功能,没有养成良好的习惯,感觉这样的课程还是要好好学习下,要不真是不知道什么叫写代码. Week1 为什么要写好代码? 因为平时读:写代 ...

  6. ElasticSearch6.5.0 【安装IK分词器】

    不得不夸奖一下ES的周边资源,比如这个IK分词器,紧跟ES的版本,卢本伟牛逼!另外ES更新太快了吧,几乎不到半个月一个小版本就发布了!!目前已经发了6.5.2,估计我还没怎么玩就到7.0了. 下载 分 ...

  7. linux之/proc

    /proc是Linux或UNIX中的一种伪文件系统机制,提供了访问内核运行结构.改变内核设置的实时数据. 与ext4.NFS.FAT32等文件系统不同,/proc中的数据存放在内存而不是硬盘上. 在/ ...

  8. mysql批量插入简单测试数据

    mysql批量插入简单测试数据 # 参考网址: https://www.2cto.com/database/201703/618280.html 1.mysql创建测试表 CREATE TABLE ` ...

  9. 2018acm-icpc青岛站后记

    我要谢谢队友和出题人给了我这一个走出自闭的机会. 继上一个星期徐州因为1分钟的罚时痛失铜牌之后一度茶饭不思,深陷被铜牌支配的恐惧,孤注一掷将宝压到了下一站的青岛上. 幸好拿了银. 给浙大的出题人点赞, ...

  10. nginx跨域的简单应用

    nginx跨域的简单应用 要求:1.浏览器访问print.qianbaihe.wang/zt 直接调转至 www.flybirdprint.com/zt,浏览器显示域名不变. server { lis ...