7、CSS权威指南--特指度和层叠

继承是指把一个元素的某些属性值传递给后代的机制。确定应该把哪些值应用到元素上时,用户代理不进要考虑继承,还要考虑声明的特指度,以及声明的来源。这个过程称为层叠。

1、特指度:同一元素可能被多个选择器匹配,当多个选择器中有相同规则时,最终使用哪个选择器的规则,需要用到特指度。

选择符的特指度由选择符本身的组成部分决定。一个特指度值由四个部分构成,例如 0, 0, 0, 0选择符的特指度通过下述规则确定:

a、选择符中的每个 ID 属性值加 0, 1, 0, 0。

b、选择符中的每个类属性值,属性选择或伪类加 0, 0, 1, 0。

c、选择符中的每个元素和伪类元素加 0, 0, 0, 1。

d、连结符和通用选择符不增加特指度。

如:h1 {color: red;} /* 特指度 = 0, 0, 0, 1 */

p em {color: purple;} /* 特指度 = 0, 0, 0, 2  */

特指度1,0,0,0比所有以0开头的特指度大。同理,0,1,0,0 大于0,0,1,7。

2、声明和特指度

选择符的特指度确定之后,其值将赋予关联的每个声明。为了计算特指度,用户代理必须把规则“打散”成单独的规则。

在任何情况下,用户代理都会确定哪些规则与元素匹配,然后找出所有相关的声明,计算格子的特指度,判断哪些规则胜出,再把胜出的规则应用到元素上,得到装饰后的结果。每个元素、选择符、和声明都要精力这一系列操作。这个行为是层叠的重要部分。

3、通用选择符的特指度

是0,0,0,0,即不增加特指度,链接符没有特指度,不是0,0,0,0.而是没有。

4、ID 选择符和  id 属性选择符之间在特指度上是有区别的 。属性与类是同一特指度。

5、行内样式的特指度

目前见到的特指度都以零开头,因此你可能在想,那一位为什么要存在呢?存在必定有用。那一位是为行内样式声明保留的,行内样式声明的特指度比其他声明高。<h1 style="color: red;">我歌且谣</h1>

6、重要性

有时候某个声明可能非常重要,超过其他所有声明, CSS 称之为重要声明。这种声明要在声明末尾的分号之前插入  !important 。

例如: p.dark {color: #333 !important ; }  !important  的位置必须正确,否则声明将失效。

带有 !important 的声明对特指度没有影响,但是会与不重要的声明分开处理。其实,所有带 !import 的声明会放在一起,而特指度冲突就在这个范围内解决。同样,重要的声明作为一个整体,其中的冲突使用特指度解决。因此,重要声明和非重要声明冲突时,重要声明始终胜出。

7、继承

特指度对理解声明是如何应用到文档上的很重要,此外,还有一个重要的概念,即继承。继承指某些样式不仅应用到所指的元素上,还应用到元素的后代上。

样式绝不会向上传播,即元素的样式绝不传给祖辈元素。

很多盒模型属性是不继承的,包括外边距,内边距,背景和边框。继承的值没有特指度,连零都没有。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{color: gray;}
        h1#page-title{color: black;}
    </style>


</head>
<body>
    <h1 id="page-title">终结继承<em>继承</em></h1>      
    <p>因为通用选择符应用于全部元素,而且特指度为零,
        所以它声明的颜色 gray 击败继承的颜色 black (由于继承的值根本没有特指度)。
        因此,em元素渲染为灰色,而不是黑色
    </p>  
</body>
</html>

8、层叠

如果两个特指度相等的规则应用到同一个元素上会发生什么?CSS才用层叠机制把样式组合在一起,即结合继承和特指度的一些规则。

CSS的层叠规则如下:

a、找到匹配特定元素的所有规则。

b、按显示权重排序应用到特定元素上的所有声明。以 !important 标记的规则比没有这一标记的权重高。

c、按来源排序引用到特定元素上的所有声明。声明由三个来源:创作人员、读者和用户代理。正常情况下,创作人员编写的样式击败读者提供的样式;

读者样式中以 !important 标记的声明比其他样式权重高,包括创作人员编写的样式中以 !important 标记的声明比其他样式权重高,

包括创作人员编写的样式中以 !important 标记的声明;创作人员和读者样式覆盖用户代理的默认样式。

d、按特指度排序应用到特定元素上的所有声明。特指度高的声明具有较高的权重。

e、按声明的前后位置排序应用到特定元素上的所有声明。样式表或文档中靠后的声明权重较高。到如的样式表中的声明放在当前样式表中所有声明的前面。 

总结:

在找到特定元素的所有规则后,对显示权重、来源、特指度、声明的前后顺序进行一 一比较,直到得出结果。

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

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

创作人员通常只需考虑钱四点。

当元素的各声明的显示权重和来源相同,那么按照特指度排序。

如果特指度也相同,那么在样式表中的位置靠后的规则胜出。 

 

posted @ 2023-01-21 22:24  我歌且谣  阅读(46)  评论(0编辑  收藏  举报