记录在MDN学习CSS中的一些个人笔记。
三个概念
层叠、优先级、继承
层叠
同级别规则，后面覆盖前面的。
优先级
当有多个规则有不同选择器时会根据优先级决定使用哪个规则。约束范围越小优先级越高。
继承
有些元素可以继承父元素的 CSS 属性，有些则不可以。
理解继承
如上面所说，不是所有属性都可以继承，可以根据常识判断：如果某个属性继承之后会对界面或者说编码造成影响，不是我们想要的，那么它很大概率是不能继承的。
控制继承
四个特殊值，用于控制继承。
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 规则，按照这三点排，由前往后：
- 重要程度
- 优先级
- 资源顺序
重要程度
!important
最高等级，忽略所有。
border: none !important;覆盖 !important 的唯一方法就是另一个 !important ，但必须在第二第三条规则上胜出。如优先级更高或同等优先级顺序更靠后。
尽量不用
!important
优先级
范围更小优先级更高，可计算。
- 千位1000：内联样式
- 百位0100：id选择器
- 十位0010：类选择器、属性选择器、伪类
- 个位0001：元素、伪元素选择器
最后根据
注: 通用选择器 (
*)，组合符 (+,>,~, ’ ')，和否定伪类 (:not) 不会影响优先级。警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。
选择器 | 千位 | 百位 | 十位 | 个位 | 优先级 |
| 0 | 0 | 0 | 1 | 0001 |
| 0 | 0 | 0 | 3 | 0003 |
| 0 | 0 | 2 | 2 | 0022 |
| 0 | 1 | 0 | 0 | 0100 |
| 1 | 0 | 0 | 0 | 1000 |
主动学习
我的答案
#outer #inner ul .nav a {
background-color: white;
}官方答案
#outer #inner a {
background-color: initial;
}参考自
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
