html层级显示优先,CSS 样式的层叠和优先级说明

上面说了浏览器要查看的所有样式来源后，现在聊一下浏览器显示元素时确认一个 CSS 属性值的次序。

补充：CSS 样式由一条或者多条以分号分割开的样式声明组成。每条声明包含着一个 CSS 属性和该属性的值，两者以冒号分割。

一、CSS 样式的层叠

CSS 的样式可以在五个地方进行定义；不同的定义位置，其使用的顺序(层叠)是不同的。

1.1、样式如何层叠

CSS 属性值的确认次序：

元素的内嵌样式。

文档内嵌样式。

外部样式表。

自定义浏览器用户样式。

浏览器内置样式。

浏览器在确定某个元素的 CSS 属性值时，先查找“元素的内嵌样式”；

如果没找到，则在“文档内嵌样式”中查找那个元素的样式；

如果没找到，则在“外部样式表”文件中查找元素的样式；

如果没找到，则在“自定义浏览器用户样式”中查询元素的样式；

如果没找到，则使用“浏览器内置样式”给元素设置样式。

1.2、important 重要样式调整层叠次序

把样式属性值标记为重要(important)，可以改变正常的样式层叠次序。

在样式声明后附上！important 即可将对应属性值标记为重要。不管这种属性定义在什么地方，浏览器都会给予优先考虑。

二、同层次样式的优先级

定义在同一层次(元素内嵌样式、文档内嵌样式或者外部样式表)的样式，确认要使用哪个 CSS 属性值；需要由“样式选择器”和样式定义位置来确定。

2.1、CSS 选择器的优先级

如果有两条定义于同一层次的样式都能应用于同一元素，而且它们都包含着浏览器要查找的 CSS 属性值；这时需要通过 CSS 样式选择器来确定。

在同级样式的优先级设置中，对 CSS 选择器分类三个级别:

第一级别：ID 选择器

第二级别：类选择器、属性选择器、伪类选择器

第三级别：标签选择器、伪元素选择器

计算第一级别选择器个数(a)，计算第二级别选择器个数(b)，计算第三级别选择器个数(c)。组成a-b-c 的一个三位数。

在确定元素的 CSS 样式属性值时，通过a-b-c 三位数比较确定。

使用 a 值较大的 CSS 属性值为准；

如果 a 值相等，则使用 b 值较大的 CSS 属性值为准；

如果 b 值相等，则使用 c 值较大的 CSS 属性值为准。

2.2、优先级相同，按加载顺序确定

如果定义在同一层次上的两条样式，应用于同一元素；并且它们的优先级 a-b-c 值也是相同的。则按照样式的定义先后顺序确定元素的 CSS 属性值。

确定的规则为：以后面定义的样式为准(后来者居上)。