阅读 940

(Ⅱ)弄清“继承”和“层叠” | CSS 结构和层叠

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码


🔗紧接上篇文章

2 继承

继承是 CSS 中最基本的内容之一。

继承的值没有“特定性”,甚至连 0 特定性也没有。因此我们随时能使用一个更“特定”的选择器来覆盖其从父选择器继承的属性。

一般来讲,如果样式会影响你的文本外观,则所有这些样式都能“继承”。如:字体颜色 color 、所有与字体相关的属性:

font-family
font-size
font-weight
font-style
复制代码

❗️而大多数 “框模型属性” 就不能继承(包括外边距、内边距、背景和边框),比如给 <body> 元素加了一个边框样式,不代表我们希望这个“身体”里所有的元素都有“边框”。


3 层叠

CSS:Cascading Style Sheets 层叠样式表。

CSS 基于的方法就是让所有样式“层叠”在一起,这是通过结合“继承”和“特殊性”做到的。

层叠是一个“过程”,是浏览器“考虑”的“过程”——浏览器在确定应当向一个元素应用哪些值时,浏览器不仅要考虑“继承”,还要考虑“声明的特殊性”,另外还需要考虑“声明本身的来源”。

站在“浏览器”的角度,它会进行以下几步来决定应用什么样式: **第一步:**收集所有样式表;

  • 包括:Web 页面作者写的样式表,读者自己增加的样式表,还有浏览器的默认样式。

第二步: 找到所有匹配的声明;

第三步: 对所有匹配的规则排序;

  • 标志 !important 的规则的权重要高于没有 !important 标志的规则。

  • 按“来源”——创作人员、读者、浏览器,对应用到给定元素的所有声明排序。
    一般来说:

    • 创作人员的样式要胜于读者的样式;
    • !important 标志的读者样式强于所有其他样式(包括有 !important 标志的创作人员样式);
    • 创作人员样式和读者样式都比浏览器默认样式要强。

第四步: 按上文讲的“特定性”计算值对所有声明排序;

第五步: 按出现顺序对应用到给定元素的所有声明排序。

  • 一个声明在样式表或文档中越后出现,它的权重就越大;

  • 如果一个样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。


掌握本篇知识点的前提下,下篇我们继续相关知识点的学习。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论