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 {
}