CSS快速复习1-层叠继承与选择器

前言

为便于大家快速复习 CSS 重要知识点，总结了 MDN 官方文档中的重点内容为下方笔记

如有疑惑之处请浏览官方教程：点击前往

层叠与继承

层叠

相同选择器优先级一致，后声明的生效

h1 {
  color: red;
}

/* 这一段生效 */
h1 {
  color: blue;
}

优先级：内联 > ID 选择器 > 类选择器 > 伪类选择器 > 标签选择器

其中，!important 标注的选择器优先级最高（但不建议使用，因为会破坏样式表固有的级联规则）

控制继承

我们可以为任意一个 CSS 属性设置以下四大属性值，实现选择性继承

1. inherit 子元素与父元素一致
2. initial 选定元素属性变成初始值
3. revert 选定元素属性变成浏览器默认值（不是初始值）
4. unset 属性重置为自然值

还有一个 all 属性，可以设置一个元素中所有属性的继承规则

blockquote {
  background-color: red;
  border: 2px solid green;
}

.fix-this {
  all: unset;
}

优先级规则

一个样式的优先级可以以一个三位数表示，默认优先级为 0-0-0

选择器中含 ID 选择器，百位+1
选择器中含类选择器，十位+1
选择器中含元素选择器，各位+1

最终比较三位数（不是把他们变成真正的三位数然后比较大小！譬如 1-0-0 永远比 0-9999-9999 大），由大到小排列，即可得到优先级顺序

某些伪类有可能会对优先级造成影响，譬如 :not()

内联选择器优先于所有的普通样式

CSS 覆盖规则

用户可以自行修改程序员定义好的样式表
如下，越在底部的优先级越高：

1. 用户样式表中普通声明
2. 程序员样式表普通声明
3. 程序员样式表!important 声明
4. 用户样式表!important 声明

选择器

组合式选择器可以一次指定多个选择器

但当组合中有一个选择器写错了，那么整个样式块都失效！

/* 如下，special多写了一个点，发生错误，整个样式失效！ */
h1,
..special {
  color: blue;
}

选择器大全

下面介绍部分有用的选择器

当然还存在所谓的相邻兄弟选择器、后继兄弟选择器，但是这两个用处非常少，故不介绍，大家可以自行去 MDN 看看

/* 元素 */
h1 {
}

/* 根据属性 */
a[title] {
}

/* class */
.demo {
}

/* id */
#god {
}

/* 伪元素 */
.demo::before {
}

/* 伪类 */
.demo:hover {
}

/* 选择class为demo的元素下的第一个div子元素 */
.demo > div {
}