CSS权威指南(第四版)读书笔记——第3章 特指度和层叠之层叠

前端技术 everyinch 152℃ 0评论

目前,本章一直回避了一个十分重要的问题:如果两个特指度相等的规则应用到同一个元素上会发生什么?浏览器如何解决这样的冲突呢?

“层叠样式表”这个名称可以提供一点线索: CSS采用层叠机制把样式组合在一起,即结合继承和特指度的一些规则。CSS的层叠规则如下:

  1. 找到匹配特定元素的所有规则。
  2. 按显式权重排序应用到特定元素上的所有声明。以!Important标记的规则比没有这一标记的权重高。
  3. 按来源排序应用到特定元素上的所有声明。声明有三个来源:创作人员、读者和用户代理。正常情况下,创作人员编写的样式击败读者提供的样式;读者样式中以!Important标记的声明比其他样式权重高,包括创作人员编写的样式中以!important标记的声明;创作人员和读者样式覆盖用户代理的默认样式。
  4. 按特指度排序应用到特定元素上的所有声明。特指度高的声明具有较高的权重。
  5. 按声明的前后位置排序应用到特定元素上的所有声明。样式表或文档中靠后的声明权重较高。导入的样式表中的声明放在当前样式表中所有声明的前面。

3.3.1按权重和来源排序

如果两个规则应用到同一个元素上,而其中一个以!important标记,那么有此标记的规则胜出:

p {color: gray !important;}

<p style=”color: black;”>Well, <em>hello</em> there!</p>

虽然有个颜色由段落的style属性提供,但是!important标记的规则依然胜出,因此段落将显示为灰色。em元素会继承灰色。

注意,如果!important在行内样式中,那么行内样式将胜出。因此  对下属规则和标记来说,段落(及其后代元素)将显示为黑色:

p {color: gray !important;}

<p style=”color: black !important;”>Well, <em>hello</em> there!</p>

如果显式权重相同,就要考虑规则的来源。如果匹配元素的两个样式权重相同,而一个.在创作人员编写的样式表中,另一个在读者提供的样式表中,那么元素将使用创作人员编写的样式表中的样式。例如,假设下面两个样式分别来自指定的位置:

p em {color: black;}    /* author’s style sheet */

p em {color: yellow;}   /* reader’s style sheet */

此时,段落中的强调文本将显示为黑色,而不是黄色,因为同样的权重下,创作人员编写的样式战胜读者提供的样式。然而,如果两个规则都用!important标记,那情况就变了:

p em {color: black !important;}    /* author’s style sheet */

p em {color: yellow !important;}   /* reader’s style sheet */

现在,段落中的强调文本将显示为黄色,而不是黑色。

有时,这里还牵涉到用户代理的默认样式(通常受用户偏好设置的影响)。在所有来源中,默认样式中的声明是影响力最低的。因此,如果创作人员为锚记定义了规则(例如声明颜色为white),那么用户代理默认的样式将被覆盖。

综上,在声明的权重上,基本要考虑五个方面。下面按权重从高到低列出:

  1. 读者提供的样式中以!important标记的声明。
  2. 创作人员编写的样式中以!important标记的声明。
  3. 创作人员编写的常规声明。
  4. 读者提供的常规声明。
  5. 用户代理的默认声明。

3.3.2按特指度排序

如果应用到一个元素上的声明有冲突,而且各声明的显式权重和来源相同,那么应该按特指度排序,特指度最高的声明胜出。例如:

p#bright {color: silver;}

p {color: black;}

<p id=”bright”>Well, hello there!</p>

对上面的规则来说,段落中的文本将显示为银色,如图3-8所示。

图3-8:特指度较高的声明胜出

3.3.3按前后位置排序

最后,如果两个规则的显式权重、来源和特指度都相同,那么在样式表中的位置靠后的规则胜出。

h1 {color: red;}

h1 {color: blue;}

此时,文档中所有h1元素的color值将取blue,而不是red。

那么,如果来自不同样式表的规则有冲突了呢?例如,对下面的样式表来说:

@import url(basic.css);

h1 {color: blue;}

如果h1{color : red;}在basic.css中,情况如何?basic.css中的全部内容相当于出现于@import所在的位置。因此,当前样式表中的规则出现在@import导入的样式之后。如果显式权重和特指度相同,当前样式表中的声明胜出。来看下面的规则:

p em {color: purple;}  /* from imported style sheet */

p em {color: gray;}    /* rule contained within the document */

此时,第二个规则胜出,因为它是后声明的那个。

就是因为前后位置有影响,所以通常才推荐按照一定的顺序编写链接的样式。链接样式的推荐顺序是“link-visited-focus-hover-active”(LVFHA),如下所示:

a:link {color: blue;}

a:visited {color: purple;}

a:focus {color: green;}

a:hover {color: red;}

a:active {color: orange;}

假设我们忽略推荐的顺序,按照字母顺序排列链接样式的各个伪类,写成这样:

a:active {color: orange;}

a:focus {color: green;}

a:hover {color: red;}

a:link {color: blue;}

a:visited {color: purple;}

此时,任何链接都不会匹配:hover、:focus或:active样式,因为:link和:visited规则在它们三个后面。链接要么已访问,要么未访问,因此:link和:visited总是会把其他的规则覆盖掉。

再来看一个创作人员可能会使用的顺序。此时,只有未访问的链接有悬停样式,已访问的链接没有。不过,已访问和未访问的链接都有激活样式:

a:link {color: blue;}

a:hover {color: red;}

a:visited {color: purple;}

a:focus {color: green;}

a:active {color: orange;}

这种冲突只发生在所有状态都设定相同的属性之时。如果不同的状态设定不同的属性,那么前后位置就没关系了。对下面的情况来说,链接样式可以写为任何顺序,不管怎么写都能起作用:

a:link {font-weight: bold;}

a:visited {font-style: italic;}

a:focus {color: green;}

a:hover {color: red;}

a:active {background: yellow;}

你可能还发现了,:link和:visited样式的顺序没关系。写成LVFHA或VLFHA都可以。

把伪类串在一起可以消除这一系列问题。下面几个规则可以写成任何顺序,不会出现谁覆盖谁的情况:

a:link {color: blue;}

a:visited {color: purple;}

a:link:hover {color: red;}

a:visited:hover {color: gray;}

这几个规则分别应用于链接的不同状态,因此相互之间不冲突。

如果加上激活状态,顺序就又变重要了。对下面的规则来说:

a:link {color: blue;}

a:visited {color: purple;}

a:link:hover {color: red;}

a:visited:hover {color: gray;}

a:link:active {color: orange;}

a:visited:active {color: silver;}

如果把激活状态的样式移到悬停状态的样式前面,二者都将被忽略。这里的原因是特指度有冲突。解决的方法是增加串联的伪类数量,如下所示:

a:link:hover:active {color: orange;}

a:visited:hover:active {color: silver;}

这样做增加了选择符的特指度(都变成了0,0,3,1),但是它们不再冲突了,因为选择状态是互斥的。

3.3.4 CSS之外的表现提示

文档除了CSS之外可能包含表现提示(presentational hint),例如font元素。这种表现提示的特指度为0,而且认为出现在创作人员编写的样式表的开头。表现提示将被创作人员编写的样式或读者提供的样式覆盖,但是不会被用户代理的默认样式覆盖。CSS3把CSS外部的表现提示视作用户代理默认样式表的一部分,而且假定出现在默认样式表的最后。

分享&收藏

转载请注明:陈童的博客 » CSS权威指南(第四版)读书笔记——第3章 特指度和层叠之层叠

喜欢 (4)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
'; } if( dopt('d_footcode_b') ) echo dopt('d_footcode'); ?>