mdn · yin1999 · May 29, 2022 · May 28, 2022 · May 29, 2022 · May 29, 2022
@@ -11,7 +11,7 @@
 
 <p>2. 仅有空的文本节点;</p>
 
-<p>3. 仅有空白符的文本节点.</p>
+<p>3. 仅有空白符的文本节点。</p>
 
 <h2 id="语法">语法</h2>
 

@@ -5,11 +5,11 @@
 ---
 <div>{{CSSRef}}{{Non-standard_header}}</div>
 
-<p>在<a href="/en-US/docs/Web/CSS">CSS </a><a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类</a>是<a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla的扩展</a>匹配任何元素，而它在非活动窗口。<strong><code>:-moz-window-inactive</code></strong></p>
+<p>在<a href="/en-US/docs/Web/CSS">CSS </a><a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类</a>是<a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 的扩展</a>匹配任何元素，而它在非活动窗口。<strong><code>:-moz-window-inactive</code></strong></p>
 
-<p><code>:-moz-window-inactive</code> 也在内容HTML文档中工作。</p>
+<p><code>:-moz-window-inactive</code> 也在内容 HTML 文档中工作。</p>
 
-<div class="note"><strong>注意：</strong>在添加此伪类之前，通过<code>active="true"</code>在顶级XUL chrome窗口上设置attribute（）来实现为背景窗口提供不同样式。该属性不再使用。</div>
+<div class="note"><strong>注意：</strong>在添加此伪类之前，通过<code>active="true"</code>在顶级 XUL chrome 窗口上设置 attribute（）来实现为背景窗口提供不同样式。该属性不再使用。</div>
 
 <h2 id="示例">示例</h2>
 
@@ -41,7 +41,7 @@ <h3 id="Link_to_section结果"><a class="local-anchor" href="https://developer.m
 
 <h2 id="产品规格">产品规格</h2>
 
-<p>不属于任何规范。这是专门针对Gecko的专有伪类。</p>
+<p>不属于任何规范。这是专门针对 Gecko 的专有伪类。</p>
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 

@@ -19,11 +19,11 @@
   color: red;
 }</pre>
 
-<p><code>:active</code> 伪类一般被用在 {{HTMLElement("a")}} 和 {{HTMLElement("button")}} 元素中. 这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的{{HTMLElement("label")}}标签被激活的表格元素。</p>
+<p><code>:active</code> 伪类一般被用在 {{HTMLElement("a")}} 和 {{HTMLElement("button")}} 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的{{HTMLElement("label")}}标签被激活的表格元素。</p>
 
 <p>这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 {{cssxref(":link")}}，{{cssxref(":hover")}} 和 {{cssxref(":visited")}}。为保证样式生效，需要把 <code>:active</code> 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 <em>LVHA 顺序</em>：<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>。</p>
 
-<div class="note"><strong>注意:</strong> 在有多键鼠标的系统中，CSS 3 规定 <code>:active</code> 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。</div>
+<div class="note"><strong>注意：</strong> 在有多键鼠标的系统中，CSS 3 规定 <code>:active</code> 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。</div>
 
 <h2 id="语法">语法</h2>
 

@@ -5,9 +5,9 @@
 ---
 <div>{{CSSRef}}</div>
 
-<p><strong><code>:checked</code></strong> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>选择器表示任何处于选中状态的<strong>radio</strong>(<code>&lt;input type="radio"&gt;</code>), <strong>checkbox </strong>(<code>&lt;input type="checkbox"&gt;</code>) 或("select") 元素中的<strong>option </strong>HTML元素("option")。</p>
+<p><strong><code>:checked</code></strong> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>选择器表示任何处于选中状态的<strong>radio</strong>(<code>&lt;input type="radio"&gt;</code>), <strong>checkbox </strong>(<code>&lt;input type="checkbox"&gt;</code>) 或 ("select") 元素中的<strong>option </strong>HTML 元素 ("option")。</p>
 
-<pre class="brush: css">/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
+<pre class="brush: css">/* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) */
 :checked {
   margin-left: 25px;
   border: 1px solid blue;
@@ -16,7 +16,7 @@
 <p>用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。</p>
 
 <div class="note">
-<p><strong>Note:</strong>因为浏览器经常将<code>&lt;option&gt;</code>视为<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>,因此不同的浏览器通过<code>:checked</code>伪类渲染出来的效果也不尽相同.</p>
+<p><strong>Note:</strong>因为浏览器经常将<code>&lt;option&gt;</code>视为<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>,因此不同的浏览器通过<code>:checked</code>伪类渲染出来的效果也不尽相同。</p>
 </div>
 
 <h2 id="语法">语法</h2>
@@ -84,11 +84,11 @@ <h4 id="Result">Result</h4>
 
 <p>{{EmbedLiveSample("Basic_example")}}</p>
 
-<h3 id="借用隐藏的checkbox来切换元素的样式（显示隐藏）">借用隐藏的checkbox来切换元素的样式（显示/隐藏）</h3>
+<h3 id="借用隐藏的checkbox来切换元素的样式（显示隐藏）">借用隐藏的 checkbox 来切换元素的样式（显示/隐藏）</h3>
 
 <h3 id="Toggling_elements_with_a_hidden_checkbox" class="hidden">Toggling elements with a hidden checkbox</h3>
 
-<p>这个例子利用了<code>:checked</code>伪类，让用户基于复选框的状态切换内容，而无需使用JavaScript。</p>
+<p>这个例子利用了<code>:checked</code>伪类，让用户基于复选框的状态切换内容，而无需使用 JavaScript。</p>
 
 <h4 id="HTML_2">HTML</h4>
 
@@ -150,9 +150,9 @@ <h4 id="Result_2">Result</h4>
 
 <h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values"><strong>图片相册</strong></h3>
 
-<p>同时，可以使用隐藏的radioboxes中的:checked伪类来构建一个<strong>只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，</strong>查看<a href="https://developer.mozilla.org/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">演示</a>。</p>
+<p>同时，可以使用隐藏的 radioboxes 中的:checked 伪类来构建一个<strong>只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，</strong>查看<a href="https://developer.mozilla.org/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">演示</a>。</p>
 
-<div class="note"><strong>注:</strong> 一个类似的效果，基于<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a>伪类和没有隐藏的radioboxes，查看<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">这个演示</a>，来自<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover">:hover</a>页面。</div>
+<div class="note"><strong>注：</strong> 一个类似的效果，基于<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a>伪类和没有隐藏的 radioboxes，查看<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">这个演示</a>，来自<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover">:hover</a>页面。</div>
 
 <h2 id="Specifications" name="Specifications">规范</h2>
 

@@ -69,7 +69,7 @@ <h2 id="规范">规范</h2>
   <tr>
    <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
    <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>定义了HTML语义和规范验证</td>
+   <td>定义了 HTML 语义和规范验证</td>
   </tr>
   <tr>
    <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>

@@ -26,7 +26,7 @@ <h2 id="示例">示例</h2>
 
 <p>下面的片段摘自我们的 <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">定义伪类</a> demo (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">点击查看源码</a>).</p>
 
-<p>在这个 demo 中我们定义了一个非常简单的自定义元素:</p>
+<p>在这个 demo 中我们定义了一个非常简单的自定义元素：</p>
 
 <pre class="brush: js">customElements.define('simple-custom',
   class extends HTMLElement {
@@ -41,13 +41,13 @@ <h2 id="示例">示例</h2>
   }
 })</pre>
 
-<p>然后在文档中插入一个该元素的副本，以及一个标准的 <code>&lt;p&gt;</code> 标签:</p>
+<p>然后在文档中插入一个该元素的副本，以及一个标准的 <code>&lt;p&gt;</code> 标签：</p>
 
 <pre class="brush: html">&lt;simple-custom text="Custom element example text"&gt;&lt;/simple-custom&gt;
 
 &lt;p&gt;Standard paragraph example text&lt;/p&gt;</pre>
 
-<p>在 CSS 中我们首先包含以下规则:</p>
+<p>在 CSS 中我们首先包含以下规则：</p>
 
 <pre class="brush: css">// 为两个元素设置不同的背景色
 p {

@@ -2,10 +2,10 @@
 title: ':dir()'
 slug: 'Web/CSS/:dir'
 tags:
-  - CSS伪类
+  - CSS 伪类
   - 布局
   - 网络
-  - 选择器4
+  - 选择器 4
 translation_of: 'Web/CSS/:dir'
 ---
 <p>{{ CSSRef() }}</p>
@@ -14,15 +14,15 @@
 
 <h2 id="总结">总结</h2>
 
-<p><code>:dir()</code>伪类匹配特定文字书写方向的元素。在HTML中, 文字方向由{{ htmlattrxref("dir", "html") }}属性决定。其他的文档类型可能有其他定义文字方向的方法。</p>
+<p><code>:dir()</code>伪类匹配特定文字书写方向的元素。在 HTML 中，文字方向由{{ htmlattrxref("dir", "html") }}属性决定。其他的文档类型可能有其他定义文字方向的方法。</p>
 
-<p>值得注意的是用CSS伪类 <code>:dir()</code> 并不等于使用 <code>[dir=…]</code> 属性选择器。后者匹配 {{ htmlattrxref("dir", "html") }} 的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的， <code>[dir=rtl]</code> 或 <code>[dir=ltr]不会匹配到dir属性的值为auto的元素。而</code> <code>:dir()</code>会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的。</p>
+<p>值得注意的是用 CSS 伪类 <code>:dir()</code> 并不等于使用 <code>[dir=…]</code> 属性选择器。后者匹配 {{ htmlattrxref("dir", "html") }} 的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的， <code>[dir=rtl]</code> 或 <code>[dir=ltr] 不会匹配到 dir 属性的值为 auto 的元素。而</code> <code>:dir()</code>会匹配经过客户端计算后的属性，不管是继承的 dir 值还是 dir 值为 auto 的。</p>
 
-<p>另外，:dir()伪类仅考虑文档（大多数情况是HTML）中定义的文字方向的语义值(semantic value)，并不会考虑格式值(styling value)，如CSS属性 {{ cssxref("direction") }} 的值。</p>
+<p>另外，:dir() 伪类仅考虑文档（大多数情况是 HTML）中定义的文字方向的语义值 (semantic value)，并不会考虑格式值 (styling value)，如 CSS 属性 {{ cssxref("direction") }} 的值。</p>
 
 <h2 id="Syntax" name="Syntax">语法</h2>
 
-<pre class="syntaxbox">元素:dir(文字书写方向) { <em>style properties</em> } 文字书写方向为ltr或rtl
+<pre class="syntaxbox">元素:dir(文字书写方向) { <em>style properties</em> } 文字书写方向为 ltr 或 rtl
 </pre>
 
 <h2 id="Examples" name="Examples">示例</h2>
@@ -35,7 +35,7 @@ <h2 id="Examples" name="Examples">示例</h2>
 &lt;/div&gt;
 </pre>
 
-<p>本例中 <code>:dir(rtl)</code> 会匹配最外层的div，内容为<code>test1的span，</code>和有希伯来字符的div。<code>:dir(ltr)</code> 会匹配到内容为<code>test2的div.</code></p>
+<p>本例中 <code>:dir(rtl)</code> 会匹配最外层的 div，内容为<code>test1 的 span，</code>和有希伯来字符的 div。<code>:dir(ltr)</code> 会匹配到内容为<code>test2 的 div.</code></p>
 
 <h2 id="规范">规范</h2>
 
@@ -51,7 +51,7 @@ <h2 id="规范">规范</h2>
   <tr>
    <td>{{ SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()') }}</td>
    <td>{{ Spec2('CSS4 Selectors') }}</td>
-   <td>最初定义.</td>
+   <td>最初定义。</td>
   </tr>
  </tbody>
 </table>

@@ -5,7 +5,7 @@
   - ':empty'
   - CSS
   - CSS 骨架效果
-  - CSS伪类
+  - CSS 伪类
   - Layout
   - css skeleton
   - skelenton

@@ -14,7 +14,7 @@
 }</pre>
 
 <div class="note">
-<p><strong>Note</strong>: 最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。</p>
+<p><strong>Note</strong>: 最初定义时，所选元素必须有一个 parent。而从选择器 Level 4 开始，parent 不再是必须的。</p>
 </div>
 
 <h2 id="语法">语法</h2>

@@ -50,7 +50,7 @@ <h4 id="结果">结果</h4>
 
 <h3 id="嵌套元素">嵌套元素</h3>
 
-<p>下面这个例子展示了如何选中多层嵌套元素。注意当不存在简单选择器时，<a href="/zh-CN/docs/Web/CSS/Universal_selectors">通配符</a>(<code>*</code>)是默认应用的。 </p>
+<p>下面这个例子展示了如何选中多层嵌套元素。注意当不存在简单选择器时，<a href="/zh-CN/docs/Web/CSS/Universal_selectors">通配符</a>(<code>*</code>) 是默认应用的。 </p>
 
 <h4 id="HTML_2">HTML</h4>
 

@@ -9,7 +9,7 @@ <h2 id="简介">简介</h2>
 
 <p><code>:first</code> {{cssxref("@page")}} <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类选择器</a> 描述的是：打印文档的时候，第一页的样式。</p>
 
-<div class="note"><strong>提示:</strong>你不能改变所有的css属性. 你只能改变 margins、 orphans、 widows、文档什么时候换页。别的所有css样式都会被忽略。</div>
+<div class="note"><strong>提示：</strong>你不能改变所有的 css 属性。你只能改变 margins、 orphans、 widows、文档什么时候换页。别的所有 css 样式都会被忽略。</div>
 
 <h2 id="语法">语法</h2>
 
@@ -47,7 +47,7 @@ <h3 id="结果">结果</h3>
 
 <p>{{ EmbedLiveSample('Example', '80%', '150px') }}</p>
 
-<div class="note"><strong>提示：</strong>在定义margin的时候，你可以只用绝对长度单位， 点击 <a href="/en-US/docs/Web/CSS/length#Absolute_length_units">length</a> 查看更多内容。</div>
+<div class="note"><strong>提示：</strong>在定义 margin 的时候，你可以只用绝对长度单位， 点击 <a href="/en-US/docs/Web/CSS/length#Absolute_length_units">length</a> 查看更多内容。</div>
 
 <h2 id="规范">规范</h2>
 

@@ -11,11 +11,11 @@
 ---
 <div>{{CSSRef}}</div>
 
-<p>当元素匹配{{cssxref(":focus")}}伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时，<strong><code>:focus-visible</code> </strong>伪类将生效。</p>
+<p>当元素匹配{{cssxref(":focus")}}伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，<strong><code>:focus-visible</code> </strong>伪类将生效。</p>
 
-<p>这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。</p>
+<p>这个选择器可以有效地根据用户的输入方式 (鼠标 vs 键盘) 展示不同形式的焦点。</p>
 
-<p>请注意Firefox通过较旧的前缀伪类 <code>:-moz-focusring</code> 支持类似的功能。更多细节请参考{{cssxref(":-moz-focusring")}}页面。</p>
+<p>请注意 Firefox 通过较旧的前缀伪类 <code>:-moz-focusring</code> 支持类似的功能。更多细节请参考{{cssxref(":-moz-focusring")}}页面。</p>
 
 <h2 id="语法">语法</h2>
 
@@ -25,7 +25,7 @@ <h2 id="示例">示例</h2>
 
 <h3 id="基本示例">基本示例</h3>
 
-<p>在这个例子中，<code>:focus-visible</code> 选择器利用客户端(UA)的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘tab切换控件有何不同。请注意元素的表现与具有 <code>:focus</code> 样式的元素的区别。</p>
+<p>在这个例子中，<code>:focus-visible</code> 选择器利用客户端 (UA) 的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘 tab 切换控件有何不同。请注意元素的表现与具有 <code>:focus</code> 样式的元素的区别。</p>
 
 <pre class="brush: html">&lt;input value="Default styles"&gt;&lt;br&gt;
 &lt;button&gt;Default styles&lt;/button&gt;&lt;br&gt;
@@ -85,13 +85,13 @@ <h3 id="选择性地显示焦点">选择性地显示焦点</h3>
 
 <h2 id="Polyfill">Polyfill</h2>
 
-<p>你可以使用 <code>:focus-visible</code> 的polyfill <a href="https://github.com/WICG/focus-visible">focus-visible.js</a> 。</p>
+<p>你可以使用 <code>:focus-visible</code> 的 polyfill <a href="https://github.com/WICG/focus-visible">focus-visible.js</a> 。</p>
 
 <h2 id="可访问性关注点">可访问性关注点</h2>
 
-<p>保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> 要求视觉焦点指示至少在3到1。</p>
+<p>保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> 要求视觉焦点指示至少在 3 到 1。</p>
 
-<p>可访问的视觉焦点指示: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">给你的网站一些焦点! 设计有效且可用的焦点指示的一些建议。</a></p>
+<p>可访问的视觉焦点指示: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">给你的网站一些焦点！设计有效且可用的焦点指示的一些建议。</a></p>
 
 <h2 id="规范">规范</h2>
 

@@ -13,9 +13,9 @@
 
 <h2 id="总结">总结</h2>
 
-<p><code>css伪类:fullscreen应用于当前处于全屏显示模式的元素。</code> 它不仅仅选择顶级元素，还包括所有已显示的栈内元素。</p>
+<p><code>css 伪类 :fullscreen 应用于当前处于全屏显示模式的元素。</code> 它不仅仅选择顶级元素，还包括所有已显示的栈内元素。</p>
 
-<div class="note">W3C标准使用不带破折号的单词:fullscreen，但Webkit和Gecko应用接口各自使用前缀带有破折号的变量：<code>:-webkit-full-screen</code> 和<code>:-moz-full-screen。</code>微软的Edge和Internet Explorer各自使用标准语法：<code>:fullscreen</code>和<code>:-ms-fullscreen。</code></div>
+<div class="note">W3C 标准使用不带破折号的单词:fullscreen，但 Webkit 和 Gecko 应用接口各自使用前缀带有破折号的变量：<code>:-webkit-full-screen</code> 和<code>:-moz-full-screen。</code>微软的 Edge 和 Internet Explorer 各自使用标准语法：<code>:fullscreen</code>和<code>:-ms-fullscreen。</code></div>
 
 <h2 id="语法">语法</h2>