目录

• 层叠
• • 1. 比较内容层级重要性的三个方法
  • 2. 通过选择器来比较层级（重要）
  • • 通过比较特殊性
  • 应用场景：
  • 3. 比较源次序
  • 重置css样式的导入
  • • 常见的重置样式表：normalize.css、reset.css、meyer.css

层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠（权重计算）：解决声明冲突的过程，浏览器自动处理
了解层叠方便写代码的时候制造层叠

1. 比较内容层级重要性的三个方法

重要性从高到底：

作者样式表：开发者书写的样式

1） 作者样式表中的! important样式

• 如果某个样式无法显示，可以在此样式的css里+ ! important
  这样此样式的优先级就是最高的，浏览器会优先显示
• ! important 最好不要加，后续需求发生改变，会比较难处理

如下所示：

	 h1{       background-color: yellow !important;            }

2. 作者样式表中的普通样式

• 正常书写的代码

3. 浏览器默认样式表中的样式

2. 通过选择器来比较层级（重要）

通过比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（x x x x）
这四个数字选取之后，可以按位依次进行比较，不需要考虑进制的问题。

• 重要性从千位依次递减

1. 千位：内联样式
2. 百位：选择器中所有id选择器的数量
3. 十位：选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位：选择器中所有元素选择器、伪元素选择器的数量

例子如下：

 
百度

应用场景：

一般用于网站发生新改动的时候，可以用层级比较高的将原来的给覆盖掉，这样就不用去改之前的代码。

3. 比较源次序

意思是 遇到两个层级一样的样式，会显示哪个的时候。

• 代码书写靠后的胜出

重置css样式的导入

1. 重置样式表

书写一些作者样式（自己写的代码），覆盖浏览器的默认样式

为什么要进行默认样式的覆盖，因为不同浏览器的展示的效果是不一样的，为了让写的网站在不同的浏览器上的效果都是一样的，会先将浏览器的样式先进行归零，也就是先写一个重置样式，再写一个自己做的css样式。

重置样式表 覆盖 浏览器的默认样式

导入css样式的时候，会先放置重置样式，再放置自己写的样式。
一般重置样式的内容不用自己写，网上有现成的。

常见的重置样式表：normalize.css、reset.css、meyer.css

• 可以网上搜此种样式。并复制代码链接，也可以将代码复制进入本地的css的文件里

2. 爱恨法则

伪类选择器的写法排列：
link > visited > hover > active

按此顺序写的原因：

某些时候，会有多种内容同时应用到a元素，所有把相对重要的元素往后写，这样此元素就会优先出现，写在中间的元素有可能在多项内容同时要产生的时候会被卡住的，但由于相对不重要，所以没有关系，把重要的内容往后排，是希望出现卡顿的时候，那个内容也能正常显示。