CSS Basic
样式表层叠(Stylesheets cascade)
简单的说，css 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候
，写在后面的就是实际使用的规则。
有三个因素需要考虑，根据重要性排序如下，前面的更重要：
- 重要程度 -
!important 修饰的属性可以覆盖其它的选择器
- 优先级
- 资源顺序
优先级
一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
一个类选择器稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
- 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是 1000。
- 百位： 选择器中包含 ID 选择器则该位得一分。
- 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位：选择器中包含元素、伪元素选择器则该位得一分。
相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：
- 用户代理样式表中的声明 (例如，浏览器的默认样式，在没有设置其他样式时使用)。
- 用户样式表中的常规声明 (由用户设置的自定义样式)。
- 作者样式表中的常规声明 (这些是我们 web 开发人员设置的样式)。
- 作者样式表中的!important声明
- 用户样式表中的!important 声明
继承
有些属性会继承父元素
有些则不会
控制继承, 通用属性值:
- inherit
- initial
- revert
- revert-layer
- unset
all 可以应用于(几乎)所有属性.
选择器
- 元素 - h1 { }
- 类 - .box { }
- id - #unique { }
- 标签属性 - a[href=”https://example.com”] { }
- 伪类与伪元素 - a:hover { } p::first-line { }
- 后代 - article p
- 子代 - article > p
- 相邻兄弟 - h1 + p
- 通用兄弟 - h1 ~ p
Reference
层叠与继承