20. 层叠 {ignore}

[toc]

声明冲突

概念：同一个样式，多次应用到同一个元素。

层叠

概念：解决声明冲突的过程，浏览器自动处理（权重计算）。

作用：经过层叠，作用到html元素上的样式最终只有一个胜出。注意：是css样式（即：某条CSS声明）胜出，而非css选择器胜出。

原理：层叠这一过程，有以下3步；若第一步能确定哪个样式胜出，那么就不会进行第二、三步；同理：若第二步能确定，则不会进行第三步。

1. 比较重要性

看样式表

重要性从高到底：

看选择器

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

具体规则：权重计算，通过选择器，计算出一个4位数（x x x x），数值大的胜出。

千位：如果是内联样式，记1，否则记0 —— 内联样式，就是直接写在元素身上的样式。（在chrome上调试 element.style {...} 的时候，实际上加上去的也就是内联样式。）
百位：等于选择器中所有id选择器的数量。#
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量。.、[]、:link :visited :hover :active
个位：等于选择器中所有元素选择器、伪元素选择器的数量。element、::before ::after

注意：说千位、百位、十位、个位，并不准确，因为这4位数，并非10进制，而是256进制。

看css规则的书写次序

代码书写靠后的胜出。

书写一些作者样式，覆盖浏览器的默认样式。

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

normalize.css、reset.css、meyer.css 这三个文件都可以直接在网上下载到，实际上都没啥大的区别，使用哪个都OK。

link > visited > hover > active

需要理解为什么是这个次序，如果不是这个次序，会出什么问题。

前提：它们的特殊性相同，即：权重相同。

原因分析：

即：当4者的某条css声明发生冲突时，后者胜出。