inherit：继承父类。

initial：继承浏览器。

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

revert：恢复原来的值。

详解：

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

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

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

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

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

<ul>

  <li>Default <a href="#">link</a> color</li>

  <li class="inherit">Inherit the <a href="#">link</a> color</li>

  <li class="initial">Reset the <a href="#">link</a> color</li>

  <li class="unset">Unset the <a href="#">link</a> color</li>

</ul>

现在用CSS给它添加样式：

body {

  color: green;

}

.inherit a {

  color: inherit;

}

.initial a {

  color: initial

}

.unset a {

  color: unset;

}

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. ecplise 正则替换技巧

    ctrl+f : ctrl+h: 例: 替换 (String)object1.getAttribute("X") (String)object2.getAttribute(&quo ...

  2. pip无法正常使用卸载并重新安装

    错误提示 ➜ ~ pip Traceback (most recent call last): File "/usr/bin/pip", line 11, in <modul ...

  3. Minieye杯第十五届华中科技大学程序设计邀请赛网络赛 部分题目

    链接:https://pan.baidu.com/s/12gSzPHEgSNbT5Dl2QqDNpA 提取码:fw39 复制这段内容后打开百度网盘手机App,操作更方便哦 D    Grid #inc ...

  4. macs安卓工程创建

    第一个 1.创建工程后先修改xml文件. 然后主程序中编写代码. center :如果图片比imageview大则显示中片中心部分 image大小  把view填满 匹配父控件 ,父控件多大它就多大. ...

  5. 使用pip cmd安装包

    pip install matplotlib -i http://pypi.douban.com/simple --trusted-host pypi.douban.com,通过命令行安装的时候,指定 ...

  6. 【优秀的设计绘图软件】Affinity Designer Beta for Mac 1.7

        [简介] Affinity Designer 1.7 beta 中文版本,具有全新的UI界面和功能,支持最新的 macOS Mojave 10.14 系统,Affinity Designer是 ...

  7. JavaMail发送邮箱

    package utils; import java.security.GeneralSecurityException; import java.util.Properties; import ja ...

  8. JSP学习记录

    <%@ page contentType="text/html;charset=gb2312" %> <html> <h1>计算器</h1 ...

  9. springboot定时任务处理

    定时任务是一种很常见的应用场景,springboot中的定时任务完全用的spring的那一套,用起来比较简单,需要注意的是线程池配置的那一块 使用 @EnableScheduling 注解就可以开启定 ...

  10. Redis分布式锁----悲观锁实现,以秒杀系统为例

    摘要:本文要实现的是一种使用redis来实现分布式锁. 1.分布式锁 分布式锁在是一种用来安全访问分式式机器上变量的安全方案,一般用在全局id生成,秒杀系统,全局变量共享.分布式事务等.一般会有两种实 ...