美文网首页前端开发笔记
CSS 层叠样式比较(样式冲突的取舍)

CSS 层叠样式比较(样式冲突的取舍)

作者: Charlin丶 | 来源:发表于2023-02-01 11:39 被阅读0次

以上面的截图为例,在实际的开发过程中随处可见同一个样式被多次应用到同一个元素当中产生的声明冲突。

为了解决样式的声明冲突,浏览器会通过权重计算进行处理。

比较过程

1.比较重要性

作者样式表:开发者书写的样式

1.作者样式表中的!important样式
2.作者样式表中的普通样式
3.浏览器默认样式表中的样式

例1
从上图可以看出即使我的类选择器的优先级高于元素选择器(在第2点会指出),但由于有!important,优先级还是最高

2.比较特殊性(看选择器)

总体规则:选择器选中的范围越窄,越特殊

简单的理解就是我选择器选中的范围越小则优先级越高


由于类选择器".green"选中的的范围比元素选择器"p"选中的范围更小,所以优先级更高。

具体规则:通过选择器分别计算出4位数字进行比较

  • 第一位:如果是内联样式,记1,否则记0
  • 第二位:选择器中所有id选择器的数量
  • 第三位:选择器中所有类选择器、属性选择器、伪类选择器的数量
  • 第四位:选择器中所有元素选择器,伪元素选择器的数量

由于这个在文章中不好演示,所以我去MDN官方文档中扒了一张图,可以理解下图为从第二、三、四位数字的计算

计算出这4位数字后会按顺序进行比较(比如说第一位值相同才比较第二位)

3.比较源次序(资源/代码顺序)

可以理解为后面的规则覆盖前面的规则,直到最后一个开始设置样式。(最后书写的代码胜出)

注意:比较顺序会依次进行,多个样式比较时,当比较第1点胜出则不会进行后续比较,当第1点比较一致则会进行第2点比较,依次类推

相关文章

  • CSS 层叠样式比较(样式冲突的取舍)

    以上面的截图为例,在实际的开发过程中随处可见同一个样式被多次应用到同一个元素当中产生的声明冲突。 为了解决样式的声...

  • CSS(层叠样式表)之优先级

    CSS层叠性 样式冲突,遵循的原则是就近原则。哪个样式离着结构近,就执行哪个样式。样式不冲突,不会层叠 CSS继承...

  • 初步认识CSS

    CSS (Cascading style sheets) 层叠样式表 1、CSS三大特性 层叠性 样式冲突...

  • HTML六

    9.1 CSS层叠性:所谓层叠性是指多中CSS样式的叠加,一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,...

  • CSS三大特性

    css层叠性 所谓层叠性是指多种CSS样式的叠加: 1.给一个标签设置的样式发生冲突的时候即样式的覆盖2.如果出现...

  • 关于CSS样式部分介绍

    CSS是什么? css(层叠样式表),层叠样式表...

  • The Definitive Guide css

    css 和 文档 层叠: css中解决样式冲突的规则,称为层叠 元素: 替换、非替换元素 替换元素: ...

  • HTML+CSSday02

    CSS层叠样式表 CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级...

  • 前端基础-CSS

    CSS层叠样式表 CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级...

  • CSS二

    一、CSS三大特性 1、层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主...

网友评论

    本文标题:CSS 层叠样式比较(样式冲突的取舍)

    本文链接:https://www.haomeiwen.com/subject/eblihdtx.html