CSS里有三种常用的属性值继承方式:inherit,initial和unset。我们用一个简单的例子来演示一下:

<ul style="color: green;">
<li>Default <a href="#">link</a> color</li>
<li>Inherit the <a style="color: inherit;" href="#">link</a> color</li>
<li>Reset the <a style="color: initial;" href="#">link</a> color</li>
<li>Unset the <a style="color: unset;" href="#">link</a> color</li>
</ul>
  • Default link color
  • Inherit the link color
  • Reset the link color
  • Unset the link color

第一项没有规定颜色继承方式,因此使用浏览器对<a>标签预设的超链接样式表,在这里是蓝色;

[注] 浏览器预设样式表:可以理解为浏览器帮我们为<a>写了个style,其优先级自然就高于其父元素了。

第二项将继承方式设置为inherit,于是使用其父(或祖父,etc)元素的颜色值,在这里是绿色;

第三项将继承方式设置为initial,表示使用color属性初始值(黑色);

[注]不要混淆属性初始值和浏览器样式表指定值。

第四项将继承方式设置为unset,意思是恢复其原本的继承方式。对color属性而言,就相当于inherit;而对于诸如border这样默认不继承的属性,就相当于initial。

CSS继承控制:inherit、initial和unset的更多相关文章

  1. The inherit, initial, and unset values

    The  inherit, initial, and unset keywords are special values you can give to any CSS property. Tests ...

  2. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  3. 从倒影说起,谈谈 CSS 继承 inherit(转)

    从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我 ...

  4. 谈谈一些有趣的CSS题目-- 从倒影说起,谈谈 CSS 继承 inherit

      开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你 ...

  5. css继承样式怎么控制?用选择器

    css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...

  6. 你真的了解CSS继承吗?看完必跪

    也许你瞧不起以前的 css ,但是你不该再轻视眼下的 css .近年来 css 的变量系统已逐步得到各大浏览器厂商支持,自定义选择器等强势袭来,嵌套系统/模块系统也在路上…为了更好的掌握 css 这门 ...

  7. CSS文本控制

    CSS文本控制 文本基础设置 字体设置 font-family可定义多个字体,系统会以从左至右的顺序进行查找,如左侧字体不存在,就往右侧找. 为什么要这么做呢?如果你只用了一种字体,而恰好人家电脑上没 ...

  8. CSS继承总结

    CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...

  9. 网页中的CSS换行控制

    在进行DivCSS布局时,需要对文本进行控制,向大家介绍一下,CSS中控制换行的四种属性.一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果.语法: whit ...

随机推荐

  1. Win10上的Docker应用:Docker-compose(容器编排)

    阅读目录: Docker应用:Hello World Docker应用:Docker-compose(容器编排) 前言: 昨天完成了Docker入门示例(Docker应用:Hello World),示 ...

  2. 一些坑 Java 执行命令行命令 Spring Boot 打包为jar ResourceUtils.getFile 等出现的问题

    Java 执行命令行命令 这个没技术含量的东西耗费了我半个多小时 String command = ....; Process process = Runtime.getRuntime().exec( ...

  3. LOJ6070 基因

    基因 给定一个长度为 \(n\) 的字符串 \(s\),有 \(q\) 组询问,每个询问给定 \(l,r\),询问 \(s[l..r]\) 中有多少本质不同的回文子串. 强制在线.\(n\leq 10 ...

  4. vim 常用命令(记录)

    很好的vim讲解:https://blog.csdn.net/weixin_37657720/article/details/80645991 命令模式:默认模式.输入ctrl+c, 输入:,转换为命 ...

  5. PHP数组操作类

    class ArrayHelper{           /**      * 从数组中删除空白的元素(包括只有空白字符的元素)      *      * 用法:      * @code php ...

  6. ECMAScript规范解读this

    在<JavaScript深入之执行上下文栈>中讲到,当JavaScript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution conte ...

  7. Python 鼠标键盘操作

    1.鼠标操作 from pymouse import PyMouse myMouse = PyMouse() #获取当前的鼠标位置 # nowP = myMouse.position() # prin ...

  8. genie 来自netflix 的分布式大数据调度服务

    Genie是Netflix开发的联合作业编排引擎.Genie提供REST-ful API来运行各种大数据工作,如Hadoop,Pig,Hive,Spark,Presto,Sqoop等.它还提供用于管理 ...

  9. 鸿蒙OS还有机会吗?

    鸿蒙最初的定位是手机操作系统,那在市场已饱和.生态已成熟,Android地位已牢不可破的当下,能成功是小概率事件,就像PC时代无法撼动Windows地位一样. 好在鸿蒙调整定位定义为面向未来的IOT操 ...

  10. 【JZOJ6246】【20190627】B

    题目 求逆续对个数为\(k\)的\(n\)阶排列个数\(mod \ 1e9+7\) $1 \le n  ,  k \le 10^5 $ 题解 $f_{i,j} = \sum_{k=0}^{i-1} f ...