CSS的层叠原理

168天前 · 代码 · 572次阅读

最近在看《CSS权威指南》,学习到选择器相关知识的时候收获颇丰,于是在这里记录一下。

层叠原理

CSS(Cascading Style Sheets 层叠样式表),可以看出对于CSS来说层叠是一个非常关键的机制。那么CSS是怎么个层叠法呢?

层叠,就是样式在文档层次中逐层叠加的过程

这里就引出了文档层次这个概念,浏览器在解析(层叠)CSS的过程中,对不同来源的样式表有着不一样的解析顺序。下面是浏览器层叠CSS不同来源样式表的顺序

  1. 浏览器默认样式表
  2. 用户样式表
  3. 作者链接样式表
  4. 作者嵌入样式表
  5. 作者行内样式表

浏览器按照从上到下的顺序依次解析样式表,而最终呈现出来的样式就是在这一层层的层叠中确定下来。具体来说就是浏览器会按照上述顺序一次检查每个来源的样式,并在有定义的情况下(按照优先级)更新对每个标签属性值的设定。

举个🌰。对于这样一个html结构中的p元素

<div class="a">
    <div class="b">
        <p>jojo</p>
    </div>
</div>

假设分别有来自浏览器的默认样式表、作者链接的样式表a.css和作者嵌入的样式表<style>对其产生影响

/* browser */
p {
    margin: 1rem 0;
    letter-spacing: .5rem;
}

/* a.css */
.a .b p {
    margin: 0;
}

/* style */
p {
    margin: 5rem 0;
    letter-spacing: .2rem;
}

首先浏览器会解析浏览器的默认样式表,得到

p {
    margin: 1rem 0;
}

其次,浏览器会解析我引入的a.css,发现对于这个p元素来说,有来自浏览器和a.css的两组规则都对其生效了,需要更新样式,观察a.css中对p元素的选择器为.a .b p,而浏览器自带的样式表的却只是p,所以a.css中的所有规则的优先级都会高于浏览器自带的样式表。需要合并的属性只有margin属性,所以就会使用a.css中的margin属性更新。而letter-spacing属性不用更新,保留就好

得到

p {
    margin: 0;
    letter-spacing: .5rem;
}

最后,浏览器解析我在html文件中的style标签中的

p {
    margin: 5rem 0;
    letter-spacing: .2rem;
}

和上面一样,先对比优先级,发现对于margin属性来说,来自a.css.a .b p选择器的优先级明显要高,那么就保留a.css中的margin属性值。

但是对于letter-spacing来说,来自浏览器的样式和它的优先级一样,这里就是按照层叠原理中的后来后有效的规则对letter-spacing进行更新。

最后得到的就是

p {
    margin: 0;
    letter-spacing: .2rem;
}

小结

其实说到这里,有小伙伴就会说:“哎,这不就是CSS文件的优先级吗?”

没错,如果把刚刚的浏览器解析不同来源的CSS文件的顺序从下到上看,也能发现,这恰恰就是我们编写CSS时所理解的优先级概念。但是,可能大家不知道优先级为什么是这么来的(也可能只有我不知道,学习的时候还是做到知其然知其所以然是最好的啦~

👍 4

css

最后修改于14天前

评论

贴吧 狗头 原神 小黄脸
收起

贴吧

  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡

狗头

  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头

原神

  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神

小黄脸

  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  1. Eltrac 38天前

    CSS 的优先级真的会逼疯人,尤其是用了一些开源项目,用的资源库 CDN 还不能直接改源文件,需要覆盖样式的时候,Ctrl + I 查半天怎么改都不对,然后 css 文件里一堆 !important huaji_han

    1. 季悠然 35天前

      太真实了哈哈哈哈,!important真的会疯掉

  2. rantrism 96天前

    您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan
    作者申请此计划后将作者的文章进行搬迁同步到社区的专栏下,你只需要简单填写一下表单申请即可,我们会给作者提供包括流量、云服务器等,另外还有些周边礼物。

  3. AHdark 148天前

    相比一大长串的css代码,或许 css-in-js 和 scss less 是更好的选择

  4. 鸟叔 154天前

    鸟叔来串门,通过虫洞穿梭至此,期待回访!

  5. 芭比 154天前

    你友链里面的头像都挺好看的。

    1. 季悠然 154天前

      朋友们的品味都很棒!

  6. zxz 166天前

    为什么我用的这个主题别人回复的时候那个头像是个不断闪烁的齿轮,如何修改呢

    1. 季悠然 165天前

      1.可能是确实没加载出来,建议更换gravatar头像源
      2.有插件冲突了
      3.建议在相关文章下进行评论,不要随便找个文章就问问题

目录

avatar

季悠然

寻找有趣的灵魂

134

文章数

2002

评论数

3

分类

好热啊

arknights!

我命令你,喜欢我!

421