网站建设外包质量进度跟进,使用二级域名会影响网站收录,wordpress 预约系统,附近电脑培训学校目录 1#xff0c;重要性2#xff0c;专用性3#xff0c;源代码顺序 CSS 属性值的计算过程中。其中第2步层叠冲突只是简单说明了下#xff0c;这篇文章来详细介绍。
层叠冲突更广泛的被称为 CSS选择器优先级计算。 为什么叫层叠冲突#xff0c;可以理解为 CSS 是 Cascadi… 目录 1重要性2专用性3源代码顺序 CSS 属性值的计算过程中。其中第2步层叠冲突只是简单说明了下这篇文章来详细介绍。
层叠冲突更广泛的被称为 CSS选择器优先级计算。 为什么叫层叠冲突可以理解为 CSS 是 Cascading Style Sheets 的缩写这里面有层叠cascade的概念。 选择器会进行组合所以才有了优先级规则。主要有3个规则前一种会直接否决后一种。
1重要性
只有一条规则 !important总是优先于其他规则。
但我在张鑫旭老师的著作《CSS世界》中发现就最终结果而言!important 也有可能会被覆盖那就是 max-width 和 max-height。
示例
style.box {width: 200px !important;max-width: 100px;height: 100px;background-color: salmon;}
/stylediv classbox/div表现 !important 需要谨慎使用会对维护造成困难。 2专用性
用来衡量选择器的具体程度主要是指它能匹配多少元素匹配的越少专用性越高。
基础专用性优先级行内样式 id选择器 class选择器 元素选择器。
而选择器组合后需要更精细的来衡量也就是权重。
千位如果声明在 style 属性中该列加 1 分相当于没有选择器所以它们的专用性总是 1000否则为 0。百位在整个选择器中每包含一个 ID 选择器该列就加 1 分。十位在整个选择器中每包含一个类选择器、属性选择器、或者伪类该列就加 1 分。个位在整个选择器中每包含一个元素选择器或伪元素该列就加 1 分。
选择器千位百位十位个位合计值备注h100010001#id01000100h1 p::first-letter00030003li a[href*” zh-CN”] .box00220022元素选择器是 li 和 a内联样式10001000
注意点
进制是 256 进制不是10进制这个无法求证参考其他文章的。通配符选择器*, 复合选择器、、~、空格和否定伪类:not在专用性中无影响。
3源代码顺序
如果选择器有相同的重要性和专用性则看源代码顺序。 以上。
