css 样式三元运算_【Hello CSS】第七章CSS的继承与可变性

• 首发：krissarea.gitee.io/blog/

• 作者：陈大鱼头

• github： KRISACHAN

继承

继承(英语：inheritance) 是面向对象软件技术当中的一个概念。在 CSS 中与 层叠(英语：Cascade) 一起描述了如何设置样式规则，并为所有元素的所有属性赋值。这两个属性同属规范 “ CSS Cascading and Inheritance Level ”。CSS中的 继承 实际上是父级元素对子元素的影响。

在之前的文章中，我们介绍过 层叠(优先级) 的规则，这里我们先复习一下：

选择器	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#indentifier	0	1	0	0	0100
h1+p::first-letter	0	0	0	3	0003
li>a[href*="zh-CN"]>.inline-warning	0	0	2	2	0022
没有选择器, 规则在一个元素的  属性里	1	0	0	0	1000

鱼头注：有很多人会认为 !important 也参与了优先级的排列，但 !important 是在优先级的规则之外的，如果参与了优先级的排列，意思就是 !important 是可以被覆盖的，但事实显然不是。

接下来我们谈谈 CSS中的继承。

特殊的通用属性值

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

值	意义
initial	属性初始值。
inherit	继承的值。
unset	如果使用 unset 的属性为继承属性，则将其视为 inerit，否则则视为 initial。
revert	属性值被设置成自定义样式所定义的属性(如果被设置)， 否则属性值被设置成用户代理的默认样式。

reset属性值

在这里分享一个CSS属性all。CSS all 简写属性 将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。 all 的值可以如下：

/* Global values */

all: initial

all: inherit

all: unset

/* CSS Cascading and Inheritance Level 4 */

all: revert;

以上四值的功能如上面的表一样。这里我们重点分享一下 revert。revert关键字指定依赖于CSS声明的源：

• 用户代理源(user-agent origin)：浏览器会有一个 基本的样式表 来给任何网页设置默认样式，这些样式统称用户代理样式，等同于 unset。

• 用户源(user origin)：网站的用户(或读者)所选择的自定义样式，主要是根据用户的一员定制(例如用户自定义的系统主题与字体)。

• 作者源(author origin)：网站开发者定义的样式。

例子如下：

body {

color: #404040;

background: #DDDDDD;

}

blockquote {

border-radius: 5px;