Skip to content

Commit

Permalink
AutoCorrect files/zh-cn/web/css/_*/ (#5955)
Browse files Browse the repository at this point in the history
Co-authored-by: A1lo <[email protected]>
  • Loading branch information
huacnlee and yin1999 authored May 29, 2022
1 parent 27a79f9 commit 2d72807
Show file tree
Hide file tree
Showing 56 changed files with 218 additions and 218 deletions.
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/_colon_-moz-only-whitespace/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<p>2. 仅有空的文本节点;</p>

<p>3. 仅有空白符的文本节点.</p>
<p>3. 仅有空白符的文本节点</p>

<h2 id="语法">语法</h2>

Expand Down
8 changes: 4 additions & 4 deletions files/zh-cn/web/css/_colon_-moz-window-inactive/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions files/zh-cn/web/css/_colon_active/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
14 changes: 7 additions & 7 deletions files/zh-cn/web/css/_colon_checked/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/_colon_default/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions files/zh-cn/web/css/_colon_defined/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
16 changes: 8 additions & 8 deletions files/zh-cn/web/css/_colon_dir/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
title: ':dir()'
slug: 'Web/CSS/:dir'
tags:
- CSS伪类
- CSS 伪类
- 布局
- 网络
- 选择器4
- 选择器 4
translation_of: 'Web/CSS/:dir'
---
<p>{{ CSSRef() }}</p>
Expand All @@ -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>
Expand All @@ -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>

Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/_colon_empty/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
- ':empty'
- CSS
- CSS 骨架效果
- CSS伪类
- CSS 伪类
- Layout
- css skeleton
- skelenton
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/_colon_first-child/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/_colon_first-of-type/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions files/zh-cn/web/css/_colon_first/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
14 changes: 7 additions & 7 deletions files/zh-cn/web/css/_colon_focus-visible/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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;
Expand Down Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions files/zh-cn/web/css/_colon_fullscreen/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Loading

0 comments on commit 2d72807

Please sign in to comment.