(3)CSS 结构和层叠

本知识学习用时:3小时,总第26/10000小时

前言:在上一篇《Oli的前端一万小时》之:(2)CSS选择器详解中,我们文章一开始就谈了“结构树”,也明白了之后的种种“选择器”都是建立在有这个“结构树”的基础之上。这篇,我们将详细阐述“结构树”之于“继承”、“层叠”等的重要性。

① 继承:继承是指在结构树中,从一个元素向其后代元素传递属性值所采用的机制;

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

一、特殊性/特定性

“特殊性/特定性”对于理解如何向文档应用声明很重要。

如果一个规则能“更准确”地选择一个元素,那么这个规则就更为“特定/特殊”!

可以通过计算的方法来得到这个“特定性”,值越大,特定性越强:

例如:

⚠️ 注: 通配选择器对一个选择器的特定性没有贡献,其“特定性=0000”,虽全是 0 ,但这不代表他没有“特定性”。反而需要记住的是:0 特定性比无特定性要强。

⚠️ 注:有时某个声明可能非常重要,超过了所有其他声明,则在这些声明结束分号前加上 !important

如:

二、继承

结构树

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

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

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

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

三、层叠

CSS:Cascading Style Sheets 层叠样式表。

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

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

站在“浏览器”的角度,它会进行以下几步来决定应用什么样式:

第一步:收集所有样式表;

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

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

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

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

② 按“来源”——创作人员、读者、浏览器,对应用到给定元素的所有声明排序。一般来说,创作人员的样式要胜于读者的样式;有 !important 标志的读者样式强于所有其他样式(包括有 !important 标志的创作人员样式);创作人员样式和读者样式都比浏览器默认样式要强。

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

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

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

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

四、对上篇文章中遗留问题的解答

如上一篇文章所说,我们需要按以上顺序来声明链接样式。

通过这篇的学习我们知道了原因:

① 他们都有相同的权重、来源;

② 所有这些选择器的“特定性”值都是一样的:0011;

③ 因此,顺序上与元素匹配的最后一个选择器才会胜出。

即:

首先,

正常情况下,a 的颜色是“蓝色”;

然后,

当我鼠标放上去之后,:hover 在顺序上在下边,所以变为“橙色”;

接着,

当我鼠标按下去时,表示我的鼠标正在这个元素上,那么 :link、:hover、:active 都生效,但按层叠规则,:active 在顺序上的最下边,故对以上产生覆盖,所以变成“黑色”;

最后,

当我点击过这个链接之后,鼠标移开后,:link 和 :visited 生效,:visited 将 :link 覆盖并永久生效。

后记:本篇知识点不多,属于基础知识,需要烂熟于心。路还很长,希望收获在路上,快乐在路上。

欢迎继续关注下文 :

(4)CSS 值和单位

(本文版权归 ”公号 | Oli的前端一万小时“ 所有,转载需说明来源)

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180510G1QJ0200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券