diff options
| -rw-r--r-- | files/zh-cn/web/css/@layer/index.md | 28 |
1 files changed, 14 insertions, 14 deletions
diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md index 8476f45e5d..86e7a3740d 100644 --- a/files/zh-cn/web/css/@layer/index.md +++ b/files/zh-cn/web/css/@layer/index.md @@ -12,17 +12,17 @@ browser-compat: css.at-rules.layer --- {{CSSRef}}{{SeeCompatTable}} -[CSS](/en-US/docs/Web/CSS) [@规则](/en-US/docs/Web/CSS/At-rule) 中的`@layer`声明了一个 _堆叠层_， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。 +[CSS](/en-US/docs/Web/CSS) [@规则](/en-US/docs/Web/CSS/At-rule) 中的`@layer`声明了一个 _级联层_， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。 ```css @layer utilities { - /* 创建一个名为 utilities 的堆叠层 */ + /* 创建一个名为 utilities 的级联层 */ } ``` ## 语法 -`@layer` @规则可以通过三种方式其一来创建堆叠层。第一种方法如上方代码所示，它创建了一个块级的@规则，其中包含作用于该层内部的CSS规则。 +`@layer` @规则可以通过三种方式其一来创建级联层。第一种方法如上方代码所示，它创建了一个块级的@规则，其中包含作用于该层内部的CSS规则。 ```css @layer utilities { @@ -35,14 +35,14 @@ browser-compat: css.at-rules.layer } } ``` -一个堆叠层同样可以通过 {{cssxref("@import")}} 来创建，规则存在于被引入的样式表内： +一个级联层同样可以通过 {{cssxref("@import")}} 来创建，规则存在于被引入的样式表内： ```css @import(utilities.css) layer(utilities); ``` -你也可以创建带命名的堆叠层，但不指定任何样式。例如，单一的命名层： +你也可以创建带命名的级联层，但不指定任何样式。例如，单一的命名层： ```css @layer utilities @@ -55,17 +55,17 @@ browser-compat: css.at-rules.layer @layer theme, layout, utilities ``` -这一做法很有用，因为层最初被指定的顺序决定了它是否有父级层。对于声明而言，如果同一声明在多个堆叠层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。 +这一做法很有用，因为层最初被指定的顺序决定了它是否有父级层。对于声明而言，如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。 -即使 `utilities` 层中规则的 _优先级低于_ `theme` 层中的，该规则仍会被应用。一旦堆叠层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建CSS选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的堆叠层中。 +即使 `utilities` 层中规则的 _优先级低于_ `theme` 层中的，该规则仍会被应用。一旦级联层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建CSS选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的级联层中。 -> **注**：在已经声明堆叠层的名字后，它们的顺序随即被确立，你可以重复声明某堆叠层的名字来向其添加CSS规则。这些样式将被附加到该层的末尾，且堆叠层之间的顺序不会改变。 +> **注**：在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加CSS规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。 -其他不属于任何一堆叠层的样式将被集中到同一匿名层，并置于所有层的前部，这意味着任何堆叠层内定义的规则都将覆盖外部声明的规则。 +其他不属于任何一级联层的样式将被集中到同一匿名层，并置于所有层的前部，这意味着任何级联层内定义的规则都将覆盖外部声明的规则。 ### 嵌套层 -堆叠层允许嵌套，例如： +级联层允许嵌套，例如： ```css @layer framework { @@ -87,7 +87,7 @@ browser-compat: css.at-rules.layer ### 匿名层 -如果创建了一个堆叠层但并未指定名字，例如： +如果创建了一个级联层但并未指定名字，例如： ```css @layer { @@ -107,9 +107,9 @@ browser-compat: css.at-rules.layer ### 基本例子 -下方的例子创建了两条CSS规则。其中一条为 `type` 层内部的 {{htmlelement("p")}} 元素创建。另一条规则创建于堆叠层外部，作用于 `.box p`。 +下方的例子创建了两条CSS规则。其中一条为 `type` 层内部的 {{htmlelement("p")}} 元素创建。另一条规则创建于级联层外部，作用于 `.box p`。 -没有堆叠层时，选择器 `.box p` 将会有最高的优先级，因此文字 `Hello, world!` 将被显示为绿色。有堆叠层时，其外部的顺序和优先级将被忽略。因为 `type` 层的次序排在存储非层级信息的匿名层之后，文字的颜色将显示为紫色。 +没有级联层时，选择器 `.box p` 将会有最高的优先级，因此文字 `Hello, world!` 将被显示为绿色。有级联层时，其外部的顺序和优先级将被忽略。因为 `type` 层的次序排在存储非层级信息的匿名层之后，文字的颜色将显示为紫色。 #### HTML @@ -140,7 +140,7 @@ browser-compat: css.at-rules.layer ### 向已存在的层中添加规则 -下方的例子创建了两个没有规则的堆叠层，随后，CSS规则被添加到这两层中。`base` 层定义了color、border、font-size和padding。`special` 层定义了不同的color属性。因为 `special` 层在定义时排在最后，其中的color属性将被应用，文字的颜色将显示为`rebeccapurple`。`base` 层中的其他规则仍然有效。 +下方的例子创建了两个没有规则的级联层，随后，CSS规则被添加到这两层中。`base` 层定义了color、border、font-size和padding。`special` 层定义了不同的color属性。因为 `special` 层在定义时排在最后，其中的color属性将被应用，文字的颜色将显示为`rebeccapurple`。`base` 层中的其他规则仍然有效。 #### HTML |