TEST12138

TEST12138

长路漫漫,唯心作伴。

前端基础之CSS 样式层叠算法

层叠是干什么的呢?
是用来解决样式冲突的
分为三个部分,比较顺序是

  1. 优先级
  2. 特殊性(权重?特定性?网上说法不一)
  3. 源次序

首先是优先级,优先级能解决的,不用去比较后面的
优先级的比较顺序是

  1. 作者样式表!important
  2. 默认样式表!important
  3. 作者样式表
  4. 默认样式表

优先级比较完还有冲突的话,就要比较特殊性
这里比较的话,会生成四个数字比较(?,?,?,?)
样式冲突的时候,会从第一个值开始比大小,哪个值大是哪个,一样的话比下一位
第一个数字只能是 0 或者 1,当写到内联样式里时是 1,没有就是 0,所以一般比较时没有内联样式的话都是三个值比较(?,?,?)
第二个是选择器里 ID 的数量
第三个是选择器里类选择器和伪类选择器以及属性选择器的数量
最后一个是选择器里的元素选择器数量

如果特殊性还没有比较出来,那就要比较源次序
就是在源代码里书写的顺序后书写的覆盖先书写的

ok, 比较顺序就是这样,最后给大家一个特殊性比较快速方法,不用自己算半天
打开 vscode,鼠标放到你写的 css 上面

image

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.