blob: 202bf23defbe26423f8c547bd0dbff216a6d8cef (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: CSS层叠
slug: Web/CSS/Cascade
translation_of: Web/CSS/Cascade
---
<p>{{ CSSRef() }}</p>
<p><span class="seoSummary">层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。</span></p>
<h2 id="哪些CSS实体会参与层叠计算">哪些CSS实体会参与层叠计算</h2>
<p>只有CSS声明，就是属性名值对，会参与层叠计算。这表示包含CSS声明以外实体的@规则不参与层叠计算，比如包含描述符（descriptors）的{{ cssxref("@font-face")}}。对于这些情形，@规则是做为一个整体参与层叠计算，比如@font-face的层叠是由其描述符font-family确定的。如果对同一个描述符定义了多次 @font-face，则最适合的 @font-face是做为一个整体而被考虑的。</p>
<p>包含在大多数@规则的CSS声明是参与层叠计算的，比如包含于{{cssxref("@media")}}、{{cssxref("@documents")}}或者{{cssxref("@supports")}}的CSS声明，但是包含于{{cssxref("@keyframes")}}的声明不参与计算，正如{{cssxref("@font-face")}}，它是作为一个整体参与层叠算法的筛选。</p>
<p>最后，注意 {{cssxref("@import")}}和{{cssxref("@charset")}}遵循特定的算法，并且不受层叠算法影响。</p>
<h2 id="CSS声明的源">CSS声明的源</h2>
<p>CSS层叠算法期望通过挑选CSS声明来给CSS属性设置正确的值。CSS声明可以有不同的来源：</p>
<ul>
<li>浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称**用户代理样式**。一些浏览器通过使用真正的样式表，而其他则通过代码模拟，但无论是哪种情形都应是不可被检测的。而且部分浏览器允许用户修改用户代理样式。尽管HTML标准对用户代理样式做了诸多限制，浏览器仍大有可为，具体表现在不同浏览器间会存在重大的差异。为了减轻开发成本以及降低样式表运行所需的基本环境，网页开发者通常会使用一个CSS reset样式表，强制将常见的属性值转为确定状态。</li>
<li>网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。</li>
<li>读者，作为浏览器的用户，可以使用自定义样式表定制使用体验。</li>
</ul>
<p>尽管CSS样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠算法则定义了它们如何相互作用。</p>
<h2 id="层叠顺序">层叠顺序</h2>
<p>层叠算法决定如何找出要应用到每个文档元素的每个属性上的值。</p>
<ol>
<li>它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的@规则（at-rule）的一部分。</li>
<li>其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者!import以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的!important值比用户代理样式表的普通值优先级高：
<table class="standard-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">来源</th>
<th scope="col">重要程度</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>用户代理</td>
<td>普通</td>
</tr>
<tr>
<td>2</td>
<td>用户</td>
<td>普通</td>
</tr>
<tr>
<td>3</td>
<td>页面作者</td>
<td>普通</td>
</tr>
<tr>
<td>4</td>
<td>CSS动画</td>
<td>见下节</td>
</tr>
<tr>
<td>5</td>
<td>页面作者</td>
<td><code>!important</code></td>
</tr>
<tr>
<td>6</td>
<td>用户</td>
<td><code>!important</code></td>
</tr>
<tr>
<td>7</td>
<td>用户代理</td>
<td><code>!important</code></td>
</tr>
<tr>
<td>8</td>
<td>css 过渡(css transitions)</td>
<td></td>
</tr>
</tbody>
</table>
</li>
<li>假如层叠顺序相等，则使用哪个值取决于<a href="/en-US/docs/CSS/Specificity">优先级</a>。</li>
</ol>
<h2 id="重置样式">重置样式</h2>
<p>当你的css对样式完成更改之后，也许会在某种情况下希望把他们还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS属性{{cssxref("all")}}能够让你快速地把（几乎）所有CSS属性设置到一个已知样式上。</p>
<p>all 属性让你能够立刻把所有的属性都还原到它们初始（默认）的状态，或是继承自前一个层叠顺序等级的状态，又或是指定一个特定的来源（用户代理、页面作者或者用户），甚至还可以选择完全清除所有的属性。</p>
<h2 id="CSS动画与层叠">CSS动画与层叠</h2>
<p><a href="/en-US/docs/CSS/Using_CSS_animations">CSS动画</a>，指使用{{ cssxref("@keyframes")}} @规则定义状态间的动画。关键帧不参与层叠，意味着在任何时候CSS都是取单一的@keyframes的值而不会是某几个@keyframe的混合。</p>
<p>当有多个满足条件的关键帧时，在最重要的文档里面最后定义的关键帧会被选中，而不会是将它们组合在一起。</p>
<p>同时仍应注意用@keyframes @规则定义的值会覆盖全部普通值，但会被!important的值覆盖。</p>
<h2 id="例子">例子</h2>
<p><strong>用户代理CSS：</strong></p>
<pre class="brush:css;">li { margin-left: 10px }</pre>
<p><strong>网页作者CSS1：</strong></p>
<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
<p><strong>网页作者CSS2：</strong></p>
<pre class="brush:css;">@media screen {
li { margin-left: 3px }
}
@media print {
li { margin-left: 1px }
}
</pre>
<p><strong>用户CSS：</strong></p>
<pre class="brush:css;">.specific { margin-left: 1em }</pre>
<p><strong>HTML：</strong></p>
<pre class="brush:html;"><ul>
<li class="specific">1<sup>st</sup></li>
<li>2<sup>nd</sup></li>
</ul>
</pre>
<p>对于这个情形，应当应用li和.specific里面的声明。由于没有声明被标记为!important，所以优先顺序为页面作者样式优于用户样式，用户代理样式最低。</p>
<p>故是这3条声明的竞争：</p>
<pre class="brush:css;">margin-left: 0</pre>
<pre class="brush:css;">margin-left: 3px</pre>
<pre class="brush:css;">margin-left: 1px</pre>
<p>由于是在屏幕显示，所以最后一条舍弃，而前两条的选择器相同，因此优先级也相同，故最终选择的是后者：</p>
<pre class="brush:css;">margin-left: 3px</pre>
<p>注意尽管定义在用户CSS里面的声明有更高的优先级，但它并不会被选中，因为层叠算法是先于优先级算法的。</p>
<h2 id="See_also">See also</h2>
<ul>
<li>The very simple <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/">introduction</a> of cascading in the CSS Tutorial.</li>
<li>{{CSS_Key_Concepts()}}</li>
</ul>
|
