CSS学习笔记｜MDN-层叠与继承

记录在MDN学习CSS中的一些个人笔记。

三个概念

层叠、优先级、继承

层叠

同级别规则，后面覆盖前面的。

优先级

当有多个规则有不同选择器时会根据优先级决定使用哪个规则。约束范围越小优先级越高。

继承

有些元素可以继承父元素的 CSS 属性，有些则不可以。

理解继承

MDN-理解继承案例

如上面所说，不是所有属性都可以继承，可以根据常识判断：如果某个属性继承之后会对界面或者说编码造成影响，不是我们想要的，那么它很大概率是不能继承的。

控制继承

四个特殊值，用于控制继承。

inherit

继承父元素属性。

initial

设置为 CSS 属性初始值。但并不是浏览器默认样式。

示例

<button class="bt">这是一个按钮</button>
<button class="bt" style="background-color:initial">这是一个按钮</button>
<button class="bt" style="all:initial">这是一个按钮</button>

.bt {
	background-color: aqua;
}

unset

设置为自然值，可以继承就继承（inherit），没继承就默认值（initial）。

revert

还原成浏览器默认样式。

注意

all：当前元素所有属性

理解层叠

如何应用 CSS 规则，按照这三点排，由前往后：

1. 重要程度
2. 优先级
3. 资源顺序

重要程度

!important

最高等级，忽略所有。

border: none !important;

覆盖 !important 的唯一方法就是另一个 !important ，但必须在第二第三条规则上胜出。如优先级更高或同等优先级顺序更靠后。

尽量不用 !important

优先级

范围更小优先级更高，可计算。

1. 千位1000：内联样式
2. 百位0100：id选择器
3. 十位0010：类选择器、属性选择器、伪类
4. 个位0001：元素、伪元素选择器

最后根据

注: 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。

选择器	千位	百位	十位	个位	优先级
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="en-US"] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
内联样式	1	0	0	0	1000

主动学习

我的答案

#outer #inner ul .nav a {
 background-color: white;
}

官方答案

#outer #inner a {
  background-color: initial;
}

参考自

MDN-层叠与继承