mdn · yin1999 · Jun 1, 2022 · May 31, 2022 · May 31, 2022 · Jun 1, 2022
@@ -21,7 +21,7 @@ <h2 id="语法">语法</h2>
 <pre class="brush: css no-line-numbers notranslate">/* property: calc(expression) */
 width: calc(100% - 80px);</pre>
 
-<p>此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。</p>
+<p>此 calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。</p>
 
 <dl>
  <dt><code>+</code></dt>
@@ -77,7 +77,7 @@ <h3 id="自动调整表单域的大小以适应其容器的大小">自动调整
 
 <p><code>calc()</code> 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。</p>
 
-<p>看一下下面的CSS：</p>
+<p>看一下下面的 CSS：</p>
 
 <pre class="brush: css notranslate">input {
   padding: 2px;
@@ -115,7 +115,7 @@ <h3 id="使用_CSS_变量嵌套使用_calc">使用 CSS 变量嵌套使用 <code>
   width: var(--widthC);
 }</pre>
 
-<p>在所有的变量都被展开后，<code>widthC</code> 的值就会变成 <code>calc( calc( 100px / 2) / 2)</code>，然后，当它被赋值给 <code>.foo</code> 的 width 属性时，所有内部的这些 <code>calc()</code>（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 <code>width</code> 属性的值就直接相当于 <code>calc( ( 100px / 2) / 2)</code> 了，或者说就变成 <code>25px</code> 了。 简而言之：一个 <code>calc()</code> 里面的 <code>calc()</code> 就仅仅相当于是一个括号。</p>
+<p>在所有的变量都被展开后，<code>widthC</code> 的值就会变成 <code>calc( calc( 100px / 2) / 2)</code>，然后，当它被赋值给 <code>.foo</code> 的 width 属性时，所有内部的这些 <code>calc()</code>（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 <code>width</code> 属性的值就直接相当于 <code>calc( ( 100px / 2) / 2)</code> 了，或者说就变成 <code>25px</code> 了。简而言之：一个 <code>calc()</code> 里面的 <code>calc()</code> 就仅仅相当于是一个括号。</p>
 
 <h2 id="无障碍相关考量">无障碍相关考量</h2>
 

@@ -49,22 +49,22 @@ <h3 id="取值">取值</h3>
  <dt><code>left</code> {{non-standard_inline}}</dt>
  <dd>标题会出现在表格的左侧。</dd>
  <dd>
- <div class="note">在CSS 2 阶段，这个值被建议加入到规范中，但是在在最终的CSS 2.1 规范中被移除。它是非标准属性。</div>
+ <div class="note">在 CSS 2 阶段，这个值被建议加入到规范中，但是在在最终的 CSS 2.1 规范中被移除。它是非标准属性。</div>
  </dd>
  <dt><code>right</code> {{non-standard_inline}}</dt>
  <dd>标题会出现在表格的右侧。</dd>
  <dd>
- <div class="note">在CSS 2 阶段，这个值被建议加入到规范中，但是在在最终的CSS 2.1 规范中被移除。它是非标准属性。</div>
+ <div class="note">在 CSS 2 阶段，这个值被建议加入到规范中，但是在在最终的 CSS 2.1 规范中被移除。它是非标准属性。</div>
  </dd>
  <dt><code>top-outside</code> {{non-standard_inline}}</dt>
  <dd>标题会被放置在表格上方，但是标题的宽度和水平对齐方式不受表格水平布局的约束。</dd>
  <dd>
- <div class="note">在CSS 2.1 规范中提到：CSS 2 规范中对 <code>top</code> 值产生的效果有不同的定义，在未来可能会重新定义这个值产生的影响效果。</div>
+ <div class="note">在 CSS 2.1 规范中提到：CSS 2 规范中对 <code>top</code> 值产生的效果有不同的定义，在未来可能会重新定义这个值产生的影响效果。</div>
  </dd>
  <dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
  <dd>标题会被放置在表格下方，但是标题的宽度和水平对齐方式不受表格水平布局的约束。</dd>
  <dd>
- <div class="note">在CSS 2.1 规范中提到：CSS 2 规范中对 <code>top</code> 值产生的效果有不同的定义，在未来可能会重新定义这个值产生的影响效果。</div>
+ <div class="note">在 CSS 2.1 规范中提到：CSS 2 规范中对 <code>top</code> 值产生的效果有不同的定义，在未来可能会重新定义这个值产生的影响效果。</div>
  </dd>
 </dl>
 
@@ -129,7 +129,7 @@ <h2 id="规范">规范</h2>
    <td>{{ SpecName('CSS Logical Properties', '#caption-side', 'caption-side') }}</td>
    <td>{{ Spec2('CSS Logical Properties') }}</td>
    <td>
-    <p>定义和css定义的书写模式值相关的顶部及底部的值。</p>
+    <p>定义和 css 定义的书写模式值相关的顶部及底部的值。</p>
    </td>
   </tr>
   <tr>

@@ -39,7 +39,7 @@ <h3 id="值">值</h3>
  </div>
  </dd>
  <dt>{{cssxref("&lt;color&gt;")}}</dt>
- <dd>所指定的插入光标的颜色值.</dd>
+ <dd>所指定的插入光标的颜色值。</dd>
 </dl>
 
 <h3 id="正式语法">正式语法</h3>

@@ -1,39 +1,39 @@
 ---
-title: CSS层叠
+title: CSS 层叠
 slug: Web/CSS/Cascade
 translation_of: Web/CSS/Cascade
 ---
 <p>{{ CSSRef() }}</p>
 
-<p>层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。</p>
+<p>层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。</p>
 
-<h2 id="哪些CSS实体会参与层叠计算">哪些CSS实体会参与层叠计算</h2>
+<h2 id="哪些CSS实体会参与层叠计算">哪些 CSS 实体会参与层叠计算</h2>
 
-<p>只有CSS声明，就是属性名值对，会参与层叠计算。这表示包含CSS声明以外实体的@规则不参与层叠计算，比如包含描述符（descriptors）的{{ cssxref("@font-face")}}。对于这些情形，@规则是做为一个整体参与层叠计算，比如@font-face的层叠是由其描述符font-family确定的。如果对同一个描述符定义了多次 @font-face，则最适合的 @font-face是做为一个整体而被考虑的。</p>
+<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>包含在大多数 @规则的 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>
+<h2 id="CSS声明的源">CSS 声明的源</h2>
 
-<p>CSS层叠算法期望通过挑选CSS声明来给CSS属性设置正确的值。CSS声明可以有不同的来源：</p>
+<p>CSS 层叠算法期望通过挑选 CSS 声明来给 CSS 属性设置正确的值。CSS 声明可以有不同的来源：</p>
 
 <ul>
- <li>浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称**用户代理样式**。一些浏览器通过使用真正的样式表，而其他则通过代码模拟，但无论是哪种情形都应是不可被检测的。而且部分浏览器允许用户修改用户代理样式。尽管HTML标准对用户代理样式做了诸多限制，浏览器仍大有可为，具体表现在不同浏览器间会存在重大的差异。为了减轻开发成本以及降低样式表运行所需的基本环境，网页开发者通常会使用一个CSS reset样式表，强制将常见的属性值转为确定状态。</li>
+ <li>浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称**用户代理样式**。一些浏览器通过使用真正的样式表，而其他则通过代码模拟，但无论是哪种情形都应是不可被检测的。而且部分浏览器允许用户修改用户代理样式。尽管 HTML 标准对用户代理样式做了诸多限制，浏览器仍大有可为，具体表现在不同浏览器间会存在重大的差异。为了减轻开发成本以及降低样式表运行所需的基本环境，网页开发者通常会使用一个 CSS reset 样式表，强制将常见的属性值转为确定状态。</li>
  <li>网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。</li>
  <li>读者，作为浏览器的用户，可以使用自定义样式表定制使用体验。</li>
 </ul>
 
-<p>尽管CSS样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠算法则定义了它们如何相互作用。</p>
+<p>尽管 CSS 样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠算法则定义了它们如何相互作用。</p>
 
 <h2 id="层叠顺序">层叠顺序</h2>
 
 <p>层叠算法决定如何找出要应用到每个文档元素的每个属性上的值。</p>
 
 <ol>
- <li>它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的@规则（at-rule）的一部分。</li>
- <li>其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者!import以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的!important值比用户代理样式表的普通值优先级高：
+ <li>它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的 @规则（at-rule）的一部分。</li>
+ <li>其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者 !import 以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的 !important 值比用户代理样式表的普通值优先级高：
   <table class="standard-table">
    <thead>
     <tr>
@@ -60,7 +60,7 @@ <h2 id="层叠顺序">层叠顺序</h2>
     </tr>
     <tr>
      <td>4</td>
-     <td>CSS动画</td>
+     <td>CSS 动画</td>
      <td>见下节</td>
     </tr>
     <tr>
@@ -80,7 +80,7 @@ <h2 id="层叠顺序">层叠顺序</h2>
     </tr>
     <tr>
      <td>8</td>
-     <td>css 过渡(css transitions)</td>
+     <td>css 过渡 (css transitions)</td>
      <td></td>
     </tr>
    </tbody>
@@ -91,29 +91,29 @@ <h2 id="层叠顺序">层叠顺序</h2>
 
 <h2 id="重置样式">重置样式</h2>
 
-<p>当你的css对样式完成更改之后，也许会在某种情况下希望把他们还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS属性{{cssxref("all")}}能够让你快速地把（几乎）所有CSS属性设置到一个已知样式上。</p>
+<p>当你的 css 对样式完成更改之后，也许会在某种情况下希望把他们还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS 属性{{cssxref("all")}}能够让你快速地把（几乎）所有 CSS 属性设置到一个已知样式上。</p>
 
 <p>all 属性让你能够立刻把所有的属性都还原到它们初始（默认）的状态，或是继承自前一个层叠顺序等级的状态，又或是指定一个特定的来源（用户代理、页面作者或者用户），甚至还可以选择完全清除所有的属性。</p>
 
-<h2 id="CSS动画与层叠">CSS动画与层叠</h2>
+<h2 id="CSS动画与层叠">CSS 动画与层叠</h2>
 
-<p><a href="/en-US/docs/CSS/Using_CSS_animations">CSS动画</a>，指使用{{ cssxref("@keyframes")}} @规则定义状态间的动画。关键帧不参与层叠，意味着在任何时候CSS都是取单一的@keyframes的值而不会是某几个@keyframe的混合。</p>
+<p><a href="/en-US/docs/CSS/Using_CSS_animations">CSS 动画</a>，指使用{{ cssxref("@keyframes")}} @规则定义状态间的动画。关键帧不参与层叠，意味着在任何时候 CSS 都是取单一的 @keyframes 的值而不会是某几个 @keyframe 的混合。</p>
 
 <p>当有多个满足条件的关键帧时，在最重要的文档里面最后定义的关键帧会被选中，而不会是将它们组合在一起。</p>
 
-<p>同时仍应注意用@keyframes @规则定义的值会覆盖全部普通值，但会被!important的值覆盖。</p>
+<p>同时仍应注意用 @keyframes @规则定义的值会覆盖全部普通值，但会被 !important 的值覆盖。</p>
 
 <h2 id="例子">例子</h2>
 
-<p><strong>用户代理CSS：</strong></p>
+<p><strong>用户代理 CSS：</strong></p>
 
 <pre class="brush:css;">li { margin-left: 10px }</pre>
 
-<p><strong>网页作者CSS1：</strong></p>
+<p><strong>网页作者 CSS1：</strong></p>
 
 <pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
 
-<p><strong>网页作者CSS2：</strong></p>
+<p><strong>网页作者 CSS2：</strong></p>
 
 <pre class="brush:css;">@media screen {
   li { margin-left: 3px }
@@ -124,7 +124,7 @@ <h2 id="例子">例子</h2>
 }
 </pre>
 
-<p><strong>用户CSS：</strong></p>
+<p><strong>用户 CSS：</strong></p>
 
 <pre class="brush:css;">.specific { margin-left: 1em }</pre>
 
@@ -136,9 +136,9 @@ <h2 id="例子">例子</h2>
 &lt;/ul&gt;
 </pre>
 
-<p>对于这个情形，应当应用li和.specific里面的声明。由于没有声明被标记为!important，所以优先顺序为页面作者样式优于用户样式，用户代理样式最低。</p>
+<p>对于这个情形，应当应用 li 和.specific 里面的声明。由于没有声明被标记为 !important，所以优先顺序为页面作者样式优于用户样式，用户代理样式最低。</p>
 
-<p>故是这3条声明的竞争：</p>
+<p>故是这 3 条声明的竞争：</p>
 
 <pre class="brush:css;">margin-left: 0</pre>
 
@@ -150,7 +150,7 @@ <h2 id="例子">例子</h2>
 
 <pre class="brush:css;">margin-left: 3px</pre>
 
-<p>注意尽管定义在用户CSS里面的声明有更高的优先级，但它并不会被选中，因为层叠算法是先于优先级算法的。</p>
+<p>注意尽管定义在用户 CSS 里面的声明有更高的优先级，但它并不会被选中，因为层叠算法是先于优先级算法的。</p>
 
 <h2 id="See_also">See also</h2>
 

@@ -10,11 +10,11 @@
 
 <h2 id="Summary" name="Summary">概述</h2>
 
-<p>当使用  <code>&gt;</code> 选择符分隔两个元素时,它只会匹配那些作为第一个元素的<strong>直接后代(</strong>子元素)的第二元素. 与之相比, 当两个元素由 <a href="/en/CSS/Descendant_selectors" style="line-height: inherit;" title="https://developer.mozilla.org/en/CSS/Descendant_selectors">后代选择器 </a>相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.</p>
+<p>当使用  <code>&gt;</code> 选择符分隔两个元素时，它只会匹配那些作为第一个元素的<strong>直接后代 (</strong>子元素) 的第二元素。与之相比，当两个元素由 <a href="/en/CSS/Descendant_selectors" style="line-height: inherit;" title="https://developer.mozilla.org/en/CSS/Descendant_selectors">后代选择器 </a>相连时，它表示匹配存在的所有由第一个元素作为祖先元素 (但不一定是父元素) 的第二个元素，无论它在 DOM 中"跳跃" 多少次。</p>
 
 <h2 id="Syntax" name="Syntax">语法</h2>
 
-<pre class="eval">元素1 &gt; 元素2 {<em>样式声明</em> }
+<pre class="eval">元素 1 &gt; 元素 2 {<em>样式声明</em> }
 </pre>
 
 <h2 id="Examples" name="Examples">示例</h2>
@@ -25,7 +25,7 @@ <h2 id="Examples" name="Examples">示例</h2>
 }
 </pre>
 
-<p>当应用与如下标记时:</p>
+<p>当应用与如下标记时：</p>
 
 <pre class="brush: html">&lt;div&gt;
   &lt;span&gt;Span 1. In the div.
@@ -35,7 +35,7 @@ <h2 id="Examples" name="Examples">示例</h2>
 &lt;span&gt;Span 3. Not in a div at all&lt;/span&gt;
 </pre>
 
-<p>会得到下面的效果:</p>
+<p>会得到下面的效果：</p>
 
 <p style="margin-left: 40px;">Span 1. In the div. Span 2. In the span that's in the div.<br>
  Span 3. Not in a div at all.</p>

@@ -28,7 +28,7 @@ <h2 id="语法">语法</h2>
 
 <p>当首选值比最大值要大时，则使用最大值。</p>
 
-<p>这个表达式可以是数学函数(参看 {{CSSxRef("calc")}} )、字面量或其它计算为有效的参数类型 (如{{CSSxRef("&lt;length&gt;")}}) 表达式，如 {{CSSxRef("attr", "attr()")}}，或嵌套的 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。作为数学表达式，你可以使用加减乘除运算而无需使用 <code>calc()</code> 函数。你也可以用括号来确定计算顺序。</p>
+<p>这个表达式可以是数学函数 (参看 {{CSSxRef("calc")}} )、字面量或其它计算为有效的参数类型 (如{{CSSxRef("&lt;length&gt;")}}) 表达式，如 {{CSSxRef("attr", "attr()")}}，或嵌套的 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。作为数学表达式，你可以使用加减乘除运算而无需使用 <code>calc()</code> 函数。你也可以用括号来确定计算顺序。</p>
 
 <p>表达式中的每一个值都可以用不同的单位。</p>
 

@@ -10,7 +10,7 @@
 
 <h2 id="Summary" name="Summary">概述</h2>
 
-<p>在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。</p>
+<p>在一个 HTML 文档中，CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。</p>
 
 <h2 id="Syntax" name="Syntax">语法</h2>
 
@@ -27,13 +27,13 @@ <h2 id="Examples" name="Examples">示例</h2>
 }
 </pre>
 
-<p>上面的CSS作用于下面的HTML代码:</p>
+<p>上面的 CSS 作用于下面的 HTML 代码：</p>
 
 <pre class="brush: html">  &lt;span class="classy"&gt;Here's a span with some text.&lt;/span&gt;
   &lt;span&gt;Here's another.&lt;/span&gt;
 </pre>
 
-<p>则会产生这样的效果:</p>
+<p>则会产生这样的效果：</p>
 
 <p>Here's a span with some text.</p>