第三章 结构和层叠

不管怎样,无论问题看上去多抽象,多难懂,都要继续努力!你的努力不会白费。

继承 是从一个元素向其后代元素传递属性值所采用的机制。

1. 特殊性

如果遇到下面这种 css :

h2.grape { color : pink; }
h2 { color: silver }

这两种规则都指向一个元素,您觉得哪种规则会胜出?

当然是第一种,即 h2.grape ,为什么呢?

因为每个选择器的特殊性。浏览器会根据不同规则计算出其特殊性,特殊性最高的规则将会胜出。

那么,这种特殊性怎么计算呢??

选择器的特殊性,是由选择器本身的组件确定。特殊性表述为4个部分,即:0,0,0,0

具体的特殊属性如下:

(1) 对于选择器中给定的各个 ID 属性值, 加 0,1,0,0;
(2) 对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0;
(3) 对于选择器中给定的各个元素和伪元素,加0,0,0,1;
(4) 结合符和通配选择器对特殊性没有任何贡献。

例如:

h1 { color: pink;} 其特殊性为:0,0,0,1;

body h1{ 0,0,0,2 }

再结合文章最前面那个例子,为啥h2.grape会胜出h2呢?

h2.grape 的特殊性为: { 0,0,1,1 }
h2的特殊性为:{ 0,0,0,1 }

所以 h2.grape 会胜出。

注意,上面的特殊性值是从左向右排列的。所以,特殊性值 1,0,0,0 大于以0开头的所有特殊值,而不论后面的数是啥。

所以,0,1,0,1 比 0,0,1,7 高。

2. 声明和特殊性

3. 通配选择器的特殊性

通配选择器对一个选择器的特殊性没有贡献。

同样,前面所展示那样,div>p, h2 + p, * 中的>、+、* 对于提高特殊性没有帮助。

4. ID和属性选择器的特殊性

html > body table tr[id="totals"] td ul > li { color: maroon }; // 0,0,1,7
li#answer { color: navy } //0,1,0,1

可以看出, li#answer 的特殊性更高,会胜出。

5. 内联样式特殊性

可能,通过上面你会发现,为什么一直都是 0,0,1,7 或者 0,1,0,1 ??

为什么第一位数一直是0??

答案是:
因为第一个 0 是为内联样式声明保留的,它比其他所有声明的特殊性都高。

比如:

h1#meadow { color:red }. // 0,1,0,1

the meadow party

// 1, 0 ,0 ,0

所以,会应用内联中的样式。

6. 重要性

有时候,某个声明可能非常重要,超过了所有其他声明,则可以使用 !important

Snapshots

h2{ color: pink !important; }

pink 将会胜出

.pink{
   color: pink !important;
}

#aaa{
    color: #fff !important;
}

fff 会胜出

7. 继承

基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。

继承的值没有特殊性。

8. 层叠

我们来思考一个问题:如果特殊性相等的两个规则同时应用到同一个元素会怎么样呢??浏览器如何解决这个冲突?

答案:按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就会越大。

比如:

h1{ color: red;}
h1{ color: pink;}

由于pink后出现,它的权重高,所以它会胜出。

(1) 按权重和来源排序

权重由大到小顺序依次是:

  1. 读者的重要声明
  2. 创作人员的重要声明
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户代理声明
(2) 按特殊性排序
p#bright { color:red; } // 0,1,0,1

p{ color: yellow;} //0,0,0,1

所以 red 胜出

(3) 按顺序排列

如果两个规则的权重、来源和特殊性完全相同,那么,在样式表中后出现的一个将会胜出。

LVHA:
:link { color: blue;}
:visited { color: purple;}
:hover { color: red;}
:active { color: orange;}

你可能感兴趣的:(第三章 结构和层叠)