From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/cascade/index.html | 160 +++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 files/zh-cn/web/css/cascade/index.html (limited to 'files/zh-cn/web/css/cascade/index.html') diff --git a/files/zh-cn/web/css/cascade/index.html b/files/zh-cn/web/css/cascade/index.html new file mode 100644 index 0000000000..ab6966567c --- /dev/null +++ b/files/zh-cn/web/css/cascade/index.html @@ -0,0 +1,160 @@ +--- +title: CSS层叠 +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +

{{ CSSRef() }}

+ +

层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。

+ +

哪些CSS实体会参与层叠计算

+ +

只有CSS声明，就是属性名值对，会参与层叠计算。这表示包含CSS声明以外实体的@规则不参与层叠计算，比如包含描述符（descriptors）的{{ cssxref("@font-face")}}。对于这些情形，@规则是做为一个整体参与层叠计算，比如@font-face的层叠是由其描述符font-family确定的。如果对同一个描述符定义了多次 @font-face，则最适合的 @font-face是做为一个整体而被考虑的。

+ +

包含在大多数@规则的CSS声明是参与层叠计算的，比如包含于{{cssxref("@media")}}、{{cssxref("@documents")}}或者{{cssxref("@supports")}}的CSS声明，但是包含于{{cssxref("@keyframes")}}的声明不参与计算，正如{{cssxref("@font-face")}}，它是作为一个整体参与层叠算法的筛选。

+ +

最后，注意 {{cssxref("@import")}}和{{cssxref("@charset")}}遵循特定的算法，并且不受层叠算法影响。

+ +

CSS声明的源

+ +

CSS层叠算法期望通过挑选CSS声明来给CSS属性设置正确的值。CSS声明可以有不同的来源：

+ + + +

尽管CSS样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠算法则定义了它们如何相互作用。

+ +

层叠顺序

+ +

层叠算法决定如何找出要应用到每个文档元素的每个属性上的值。

+ +
    +
  1. 它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的@规则（at-rule）的一部分。
    2. +
  2. 其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者!import以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的!important值比用户代理样式表的普通值优先级高： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    来源重要程度
    1用户代理普通
    2用户普通
    3页面作者普通
    4CSS动画见下节
    5用户代理!important
    6页面作者!important
    7用户!important
    8css 过渡(css transitions)
    +
    3. +
  3. 假如层叠顺序相等，则使用哪个值取决于优先级。
    4. +
+ +

重置样式

+ +

当你的css对样式完成更改之后，也许会在某种情况下希望把他们还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS属性{{cssxref("all")}}能够让你快速地把（几乎）所有CSS属性设置到一个已知样式上。

+ +

all 属性让你能够立刻把所有的属性都还原到它们初始（默认）的状态，或是继承自前一个层叠顺序等级的状态，又或是指定一个特定的来源（用户代理、页面作者或者用户），甚至还可以选择完全清除所有的属性。

+ +

CSS动画与层叠

+ +

CSS动画，指使用{{ cssxref("@keyframes")}} @规则定义状态间的动画。关键帧不参与层叠，意味着在任何时候CSS都是取单一的@keyframes的值而不会是某几个@keyframe的混合。

+ +

当有多个满足条件的关键帧时，在最重要的文档里面最后定义的关键帧会被选中，而不会是将它们组合在一起。

+ +

同时仍应注意用@keyframes @规则定义的值会覆盖全部普通值，但会被!important的值覆盖。

+ +

例子

+ +

用户代理CSS：

+ +
li { margin-left: 10px }
+ +

网页作者CSS1：

+ +
li { margin-left: 0 } /* This is a reset */
+ +

网页作者CSS2：

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

用户CSS：

+ +
.specific { margin-left: 1em }
+ +

HTML：

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

对于这个情形，应当应用li和.specific里面的声明。由于没有声明被标记为!important，所以优先顺序为页面作者样式优于用户样式，用户代理样式最低。

+ +

故是这3条声明的竞争：

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

由于是在屏幕显示，所以最后一条舍弃，而前两条的选择器相同，因此优先级也相同，故最终选择的是后者：

+ +
margin-left: 3px
+ +

注意尽管定义在用户CSS里面的声明有更高的优先级，但它并不会被选中，因为层叠算法是先于优先级算法的。

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf