html层级显⽰优先,CSS样式的层叠和优先级说明
上⾯说了浏览器要查看的所有样式来源后，现在聊⼀下浏览器显⽰元素时确认⼀个 CSS 属性值的次序。
补充：CSS 样式由⼀条或者多条以分号分割开的样式声明组成。每条声明包含着⼀个 CSS 属性和该属性的值，两者以冒号分割。
⼀、CSS 样式的层叠
CSS 的样式可以在五个地⽅进⾏定义；不同的定义位置，其使⽤的顺序(层叠)是不同的。
1.1、样式如何层叠
CSS 属性值的确认次序：
元素的内嵌样式。
⽂档内嵌样式。
外部样式表。
⾃定义浏览器⽤户样式。
浏览器内置样式。
浏览器在确定某个元素的 CSS 属性值时，先查“元素的内嵌样式”；
如果没到，则在“⽂档内嵌样式”中查那个元素的样式；
如果没到，则在“外部样式表”⽂件中查元素的样式；
如果没到，则在“⾃定义浏览器⽤户样式”中查询元素的样式；
如果没到，则使⽤“浏览器内置样式”给元素设置样式。
1.2、important 重要样式调整层叠次序
把样式属性值标记为重要(important)，可以改变正常的样式层叠次序。
在样式声明后附上！important 即可将对应属性值标记为重要。不管这种属性定义在什么地⽅，浏览器都会给予优先考虑。
⼆、同层次样式的优先级
定义在同⼀层次(元素内嵌样式、⽂档内嵌样式或者外部样式表)的样式，确认要使⽤哪个 CSS 属性值；需要由“样式选择器”和样式定义位置来确定。
2.1、CSS 选择器的优先级
如果有两条定义于同⼀层次的样式都能应⽤于同⼀元素，⽽且它们都包含着浏览器要查的 CSS 属性值；这时需要通过 CSS 样式选择器来确定。
在同级样式的优先级设置中，对 CSS 选择器分类三个级别:
第⼀级别：ID 选择器
第⼆级别：类选择器、属性选择器、伪类选择器
css 属性选择器
第三级别：标签选择器、伪元素选择器
计算第⼀级别选择器个数(a)，计算第⼆级别选择器个数(b)，计算第三级别选择器个数(c)。组成a-b-c 的⼀个三位数。
在确定元素的 CSS 样式属性值时，通过a-b-c 三位数⽐较确定。
使⽤ a 值较⼤的 CSS 属性值为准；
如果 a 值相等，则使⽤ b 值较⼤的 CSS 属性值为准；
如果 b 值相等，则使⽤ c 值较⼤的 CSS 属性值为准。
2.2、优先级相同，按加载顺序确定
如果定义在同⼀层次上的两条样式，应⽤于同⼀元素；并且它们的优先级 a-b-c 值也是相同的。则按照样式的定义先后顺序确定元素的CSS 属性值。
确定的规则为：以后⾯定义的样式为准(后来者居上)。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。