css控制继承
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控制继承的更多相关文章
- css 可继承属性 display:inline-block 历史
1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- js，css控制网页内容不让选中和复制
---恢复内容开始--- JS, CSS控制网页内容不让选择和复制 CSS 控制: <style> body{ -moz-user-select:none;//针对火狐浏览器,谷歌则-we ...
- CSS系列：CSS的继承与层叠特性
1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...
- CSS控制表格（table）样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
- CSS 控制Html页面高度导致抖动问题的原因
CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...
- CSS控制XML与通过js解析xml然后通过html显示xml中的数据
使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...
- Flex中使用CSS控制页面样式
Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- InnoDB，5项最佳实践，知其所以然？
InnoDB,5项最佳实践,知其所以然? 原创: 58沈剑 架构师之路 昨天 缓存讲了一个月<缓存架构,一篇足够>.今天,开始写数据库. 第一篇,说说MySQL两个最常用的存储引擎,MyI ...
- MySQL使用普通用户访问返回ERROR 1698 (28000): Access denied for user 'root'@'localhost'
这个问题最开始查资料都说要改密码,密码不对.其实不是这个样子都. 解决方法 修改/etc/mysql/my.cnf,添加以下内容 [mysqld] skip-grant-tables 重启mysql服 ...
- 用lemon测交互题
题目类型:传统. 答案比较类型:逐行比较类型(忽略多余空格和制表符). 配置:交互. 编译器参数: -o %s %s.* ..\..\data\%s\judge.cpp -Wl,--stack= ju ...
- 记录EXCEL格式和TXT文本格式之间的互转
EXCEL格式转变成TXT文本格式 1.打开execl文档,点击文件另存为 2.选择txt保存 3.重命名文档,打开该txt文档 4.按Ctrl+H,将文档中空格转换成其他分割符,单击确定 TXT格式 ...
- html 网页背景图片根据屏幕大小CSS自动缩放
https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...
- 使用webdriver+urllib爬取网页数据(模拟登陆，过验证码)
urilib是python的标准库,当我们使用Python爬取网页数据时,往往用的是urllib模块,通过调用urllib模块的urlopen(url)方法返回网页对象,并使用read()方法获得ur ...
- python 类的介绍实例
使用面向对象的优点: 1.能够更好的设计软件架构 2.维护软件模块 3.易于架构和组件的重用 类的定义: 构造函数:初始化用,写不写都可以,默认为空 类属性:属于类的对象 方法属性:不属于类的对象 私 ...
- java和c#中的装箱和拆箱操作
c#装箱和拆箱 装箱:整体上来说,装箱是将值类型转换成引用类型,比如将Vector3转换成Object类型. 具体而言: 1)在托管堆中为值类型分配内存.除了原始的数值以外还应该有指向该数值的引用. ...
- 转：值得收藏！那些鲜为人知的 Mac OS X 技巧
看到一篇网友整理的比较好的“那些鲜为人知的 Mac OS X 技巧”,转载过来分享给大家!希望能有帮助. 更多专题,可关注小编[磨人的小妖精],查看我的文章,也可上[风云社区 SCOEE],查找和下载 ...
- python各模块组合实例
# encoding: utf-8 import requests import time from Crypto.Cipher import AES import base64 import has ...