不属于任何规范。这是专门针对Gecko的专有伪类。
+不属于任何规范。这是专门针对 Gecko 的专有伪类。
浏览器兼容性
diff --git a/files/zh-cn/web/css/_colon_active/index.html b/files/zh-cn/web/css/_colon_active/index.html index 8e7ca605a1f5c9..2a805a0695dfac 100644 --- a/files/zh-cn/web/css/_colon_active/index.html +++ b/files/zh-cn/web/css/_colon_active/index.html @@ -19,11 +19,11 @@ color: red; } -:active 伪类一般被用在 {{HTMLElement("a")}} 和 {{HTMLElement("button")}} 元素中. 这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的{{HTMLElement("label")}}标签被激活的表格元素。
:active 伪类一般被用在 {{HTMLElement("a")}} 和 {{HTMLElement("button")}} 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的{{HTMLElement("label")}}标签被激活的表格元素。
这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 {{cssxref(":link")}}，{{cssxref(":hover")}} 和 {{cssxref(":visited")}}。为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。
:active 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。:active 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。语法
diff --git a/files/zh-cn/web/css/_colon_checked/index.html b/files/zh-cn/web/css/_colon_checked/index.html index efe9120f21f64b..345f8b368a4dd7 100644 --- a/files/zh-cn/web/css/_colon_checked/index.html +++ b/files/zh-cn/web/css/_colon_checked/index.html @@ -5,9 +5,9 @@ ---:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。
:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或 ("select") 元素中的option HTML 元素 ("option")。
/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
+/* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) */
:checked {
margin-left: 25px;
border: 1px solid blue;
@@ -16,7 +16,7 @@
用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。
-Note:因为浏览器经常将<option>视为可替换元素,因此不同的浏览器通过:checked伪类渲染出来的效果也不尽相同.
+Note:因为浏览器经常将<option>视为可替换元素,因此不同的浏览器通过:checked伪类渲染出来的效果也不尽相同。
语法
@@ -84,11 +84,11 @@ Result
{{EmbedLiveSample("Basic_example")}}
-借用隐藏的checkbox来切换元素的样式（显示/隐藏）
+借用隐藏的 checkbox 来切换元素的样式（显示/隐藏）
Toggling elements with a hidden checkbox
-这个例子利用了:checked伪类，让用户基于复选框的状态切换内容，而无需使用JavaScript。
+这个例子利用了:checked伪类，让用户基于复选框的状态切换内容，而无需使用 JavaScript。
HTML
@@ -150,9 +150,9 @@ Result
图片相册
-同时，可以使用隐藏的radioboxes中的:checked伪类来构建一个只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，查看演示。
+同时，可以使用隐藏的 radioboxes 中的:checked 伪类来构建一个只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，查看演示。
-
+
规范
diff --git a/files/zh-cn/web/css/_colon_default/index.html b/files/zh-cn/web/css/_colon_default/index.html
index 68866dcb15689b..18a3e269aee90b 100644
--- a/files/zh-cn/web/css/_colon_default/index.html
+++ b/files/zh-cn/web/css/_colon_default/index.html
@@ -69,7 +69,7 @@ 规范
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}
{{Spec2('HTML5 W3C')}}
- 定义了HTML语义和规范验证
+ 定义了 HTML 语义和规范验证
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}
diff --git a/files/zh-cn/web/css/_colon_defined/index.html b/files/zh-cn/web/css/_colon_defined/index.html
index 7d33bedbf2223a..1c318c97962d40 100644
--- a/files/zh-cn/web/css/_colon_defined/index.html
+++ b/files/zh-cn/web/css/_colon_defined/index.html
@@ -26,7 +26,7 @@ 示例
下面的片段摘自我们的 定义伪类 demo (点击查看源码).
-在这个 demo 中我们定义了一个非常简单的自定义元素:
+在这个 demo 中我们定义了一个非常简单的自定义元素：
customElements.define('simple-custom',
class extends HTMLElement {
@@ -41,13 +41,13 @@ 示例
}
})
-然后在文档中插入一个该元素的副本，以及一个标准的 <p> 标签:
+然后在文档中插入一个该元素的副本，以及一个标准的 <p> 标签：
<simple-custom text="Custom element example text"></simple-custom>
<p>Standard paragraph example text</p>
-在 CSS 中我们首先包含以下规则:
+在 CSS 中我们首先包含以下规则：
// 为两个元素设置不同的背景色
p {
diff --git a/files/zh-cn/web/css/_colon_dir/index.html b/files/zh-cn/web/css/_colon_dir/index.html
index 2c5daad5ba5423..6ba81f0b948aaa 100644
--- a/files/zh-cn/web/css/_colon_dir/index.html
+++ b/files/zh-cn/web/css/_colon_dir/index.html
@@ -2,10 +2,10 @@
title: ':dir()'
slug: 'Web/CSS/:dir'
tags:
- - CSS伪类
+ - CSS 伪类
- 布局
- 网络
- - 选择器4
+ - 选择器 4
translation_of: 'Web/CSS/:dir'
---
{{ CSSRef() }}
@@ -14,15 +14,15 @@
总结
-:dir()伪类匹配特定文字书写方向的元素。在HTML中, 文字方向由{{ htmlattrxref("dir", "html") }}属性决定。其他的文档类型可能有其他定义文字方向的方法。
+:dir()伪类匹配特定文字书写方向的元素。在 HTML 中，文字方向由{{ htmlattrxref("dir", "html") }}属性决定。其他的文档类型可能有其他定义文字方向的方法。
-值得注意的是用CSS伪类 :dir() 并不等于使用 [dir=…] 属性选择器。后者匹配 {{ htmlattrxref("dir", "html") }} 的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的， [dir=rtl] 或 [dir=ltr]不会匹配到dir属性的值为auto的元素。而 :dir()会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的。
+值得注意的是用 CSS 伪类 :dir() 并不等于使用 [dir=…] 属性选择器。后者匹配 {{ htmlattrxref("dir", "html") }} 的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的， [dir=rtl] 或 [dir=ltr] 不会匹配到 dir 属性的值为 auto 的元素。而 :dir()会匹配经过客户端计算后的属性，不管是继承的 dir 值还是 dir 值为 auto 的。
-另外，:dir()伪类仅考虑文档（大多数情况是HTML）中定义的文字方向的语义值(semantic value)，并不会考虑格式值(styling value)，如CSS属性 {{ cssxref("direction") }} 的值。
+另外，:dir() 伪类仅考虑文档（大多数情况是 HTML）中定义的文字方向的语义值 (semantic value)，并不会考虑格式值 (styling value)，如 CSS 属性 {{ cssxref("direction") }} 的值。
语法
-元素:dir(文字书写方向) { style properties } 文字书写方向为ltr或rtl
+元素:dir(文字书写方向) { style properties } 文字书写方向为 ltr 或 rtl
示例
@@ -35,7 +35,7 @@ 示例
</div>
-本例中 :dir(rtl) 会匹配最外层的div，内容为test1的span，和有希伯来字符的div。:dir(ltr) 会匹配到内容为test2的div.
+本例中 :dir(rtl) 会匹配最外层的 div，内容为test1 的 span，和有希伯来字符的 div。:dir(ltr) 会匹配到内容为test2 的 div.
规范
@@ -51,7 +51,7 @@ 规范
{{ SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()') }}
{{ Spec2('CSS4 Selectors') }}
- 最初定义.
+ 最初定义。
diff --git a/files/zh-cn/web/css/_colon_empty/index.html b/files/zh-cn/web/css/_colon_empty/index.html
index 39e646f3c3d98a..7bee039a87de8f 100644
--- a/files/zh-cn/web/css/_colon_empty/index.html
+++ b/files/zh-cn/web/css/_colon_empty/index.html
@@ -5,7 +5,7 @@
- ':empty'
- CSS
- CSS 骨架效果
- - CSS伪类
+ - CSS 伪类
- Layout
- css skeleton
- skelenton
diff --git a/files/zh-cn/web/css/_colon_first-child/index.html b/files/zh-cn/web/css/_colon_first-child/index.html
index bb4178dbb20799..824c4a4c62318b 100644
--- a/files/zh-cn/web/css/_colon_first-child/index.html
+++ b/files/zh-cn/web/css/_colon_first-child/index.html
@@ -14,7 +14,7 @@
}
-Note: 最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。
+Note: 最初定义时，所选元素必须有一个 parent。而从选择器 Level 4 开始，parent 不再是必须的。
语法
diff --git a/files/zh-cn/web/css/_colon_first-of-type/index.html b/files/zh-cn/web/css/_colon_first-of-type/index.html
index c918b682c1d6ee..91ecf55bf623a0 100644
--- a/files/zh-cn/web/css/_colon_first-of-type/index.html
+++ b/files/zh-cn/web/css/_colon_first-of-type/index.html
@@ -50,7 +50,7 @@ 结果
嵌套元素
-下面这个例子展示了如何选中多层嵌套元素。注意当不存在简单选择器时，通配符(*)是默认应用的。
+下面这个例子展示了如何选中多层嵌套元素。注意当不存在简单选择器时，通配符(*) 是默认应用的。
HTML
diff --git a/files/zh-cn/web/css/_colon_first/index.html b/files/zh-cn/web/css/_colon_first/index.html
index 9c00c4d9214e99..db7a96859fe372 100644
--- a/files/zh-cn/web/css/_colon_first/index.html
+++ b/files/zh-cn/web/css/_colon_first/index.html
@@ -9,7 +9,7 @@ 简介
:first {{cssxref("@page")}} CSS 伪类选择器 描述的是：打印文档的时候，第一页的样式。
-提示:你不能改变所有的css属性. 你只能改变 margins、 orphans、 widows、文档什么时候换页。别的所有css样式都会被忽略。
+提示：你不能改变所有的 css 属性。你只能改变 margins、 orphans、 widows、文档什么时候换页。别的所有 css 样式都会被忽略。
语法
@@ -47,7 +47,7 @@ 结果
{{ EmbedLiveSample('Example', '80%', '150px') }}
-提示：在定义margin的时候，你可以只用绝对长度单位， 点击 length 查看更多内容。
+提示：在定义 margin 的时候，你可以只用绝对长度单位， 点击 length 查看更多内容。
规范
diff --git a/files/zh-cn/web/css/_colon_focus-visible/index.html b/files/zh-cn/web/css/_colon_focus-visible/index.html
index 75d4997c755709..5919e5a783513c 100644
--- a/files/zh-cn/web/css/_colon_focus-visible/index.html
+++ b/files/zh-cn/web/css/_colon_focus-visible/index.html
@@ -11,11 +11,11 @@
---
{{CSSRef}}
-当元素匹配{{cssxref(":focus")}}伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时，:focus-visible 伪类将生效。
+当元素匹配{{cssxref(":focus")}}伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，:focus-visible 伪类将生效。
-这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。
+这个选择器可以有效地根据用户的输入方式 (鼠标 vs 键盘) 展示不同形式的焦点。
-请注意Firefox通过较旧的前缀伪类 :-moz-focusring 支持类似的功能。更多细节请参考{{cssxref(":-moz-focusring")}}页面。
+请注意 Firefox 通过较旧的前缀伪类 :-moz-focusring 支持类似的功能。更多细节请参考{{cssxref(":-moz-focusring")}}页面。
语法
@@ -25,7 +25,7 @@ 示例
基本示例
-在这个例子中，:focus-visible 选择器利用客户端(UA)的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘tab切换控件有何不同。请注意元素的表现与具有 :focus 样式的元素的区别。
+在这个例子中，:focus-visible 选择器利用客户端 (UA) 的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘 tab 切换控件有何不同。请注意元素的表现与具有 :focus 样式的元素的区别。
<input value="Default styles"><br>
<button>Default styles</button><br>
@@ -85,13 +85,13 @@ 选择性地显示焦点
Polyfill
-你可以使用 :focus-visible 的polyfill focus-visible.js 。
+你可以使用 :focus-visible 的 polyfill focus-visible.js 。
可访问性关注点
-保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 WCAG 2.1 SC 1.4.11 Non-Text Contrast 要求视觉焦点指示至少在3到1。
+保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 WCAG 2.1 SC 1.4.11 Non-Text Contrast 要求视觉焦点指示至少在 3 到 1。
-可访问的视觉焦点指示: 给你的网站一些焦点! 设计有效且可用的焦点指示的一些建议。
+可访问的视觉焦点指示: 给你的网站一些焦点！设计有效且可用的焦点指示的一些建议。
规范
diff --git a/files/zh-cn/web/css/_colon_fullscreen/index.html b/files/zh-cn/web/css/_colon_fullscreen/index.html
index 8d1b7d8af68f35..f57d57b8df2543 100644
--- a/files/zh-cn/web/css/_colon_fullscreen/index.html
+++ b/files/zh-cn/web/css/_colon_fullscreen/index.html
@@ -13,9 +13,9 @@
总结
-css伪类:fullscreen应用于当前处于全屏显示模式的元素。 它不仅仅选择顶级元素，还包括所有已显示的栈内元素。
+css 伪类 :fullscreen 应用于当前处于全屏显示模式的元素。 它不仅仅选择顶级元素，还包括所有已显示的栈内元素。
-W3C标准使用不带破折号的单词:fullscreen，但Webkit和Gecko应用接口各自使用前缀带有破折号的变量：:-webkit-full-screen 和:-moz-full-screen。微软的Edge和Internet Explorer各自使用标准语法：:fullscreen和:-ms-fullscreen。
+W3C 标准使用不带破折号的单词:fullscreen，但 Webkit 和 Gecko 应用接口各自使用前缀带有破折号的变量：:-webkit-full-screen 和:-moz-full-screen。微软的 Edge 和 Internet Explorer 各自使用标准语法：:fullscreen和:-ms-fullscreen。
语法
diff --git a/files/zh-cn/web/css/_colon_host-context()/index.html b/files/zh-cn/web/css/_colon_host-context()/index.html
index 4ad6f120a9ea66..9d26558f4df798 100644
--- a/files/zh-cn/web/css/_colon_host-context()/index.html
+++ b/files/zh-cn/web/css/_colon_host-context()/index.html
@@ -6,17 +6,17 @@
{{CSSRef}}{{SeeCompatTable}}
-:host-context() CSS 伪类的作用是选择shadow DOM 中shadow host，这个伪类内可以写关于该shadow host的CSS规则。 (我们可以从 shadow DOM 中选择一个自定义元素 custom element) — 但前提是，在DOM 层级中，括号中的选择器参数必须和shadow host 的祖先相匹配。
+:host-context() CSS 伪类的作用是选择 shadow DOM 中 shadow host，这个伪类内可以写关于该 shadow host 的 CSS 规则。 (我们可以从 shadow DOM 中选择一个自定义元素 custom element) — 但前提是，在 DOM 层级中，括号中的选择器参数必须和 shadow host 的祖先相匹配。
典型的使用方法是后代选择器表达式。例如 h1 — 只选择在<h1> 内的自定义元素的实例。
-Note: 该伪类的css样式在 shadow DOM 之外的元素上是没有效果的
+Note: 该伪类的 css 样式在 shadow DOM 之外的元素上是没有效果的
-/* 选择了一个 shadow root host, 当且仅当这个
- shadow root host 是括号中选择器参数(h1)的后代 */
+/* 选择了一个 shadow root host，当且仅当这个
+ shadow root host 是括号中选择器参数 (h1) 的后代 */
:host-context(h1) {
font-weight: bold;
@@ -39,7 +39,7 @@ Examples
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
-在自定义元素的构造器函数中，我们创建 style 和 span 元素。让 span 里呈现的是自定义元素的文字内容，并且给style 元素一些CSS 规则。
+在自定义元素的构造器函数中，我们创建 style 和 span 元素。让 span 里呈现的是自定义元素的文字内容，并且给style 元素一些 CSS 规则。
let style = document.createElement('style');
let span = document.createElement('span');
@@ -56,7 +56,7 @@ Examples
':host(.footer) { color : red; }' +
':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
-:host-context(h1) { font-style: italic; } 和 :host-context(h1):after { content: " - no links in headers!" 这些CSS 规则规定了位于<h1> 标签内部的 <context-span> 元素的实例的样式。
+:host-context(h1) { font-style: italic; } 和 :host-context(h1):after { content: " - no links in headers!" 这些 CSS 规则规定了位于<h1> 标签内部的 <context-span> 元素的实例的样式。
Specifications
diff --git a/files/zh-cn/web/css/_colon_host/index.html b/files/zh-cn/web/css/_colon_host/index.html
index 525620deb4bae3..4989eecc9176ae 100644
--- a/files/zh-cn/web/css/_colon_host/index.html
+++ b/files/zh-cn/web/css/_colon_host/index.html
@@ -9,10 +9,10 @@
---
{{ CSSRef }}
-:host CSS伪类选择包含其内部使用的CSS的shadow DOM的根元素 - 换句话说，这允许你从其shadow DOM中选择一个自定义元素。
+:host CSS 伪类选择包含其内部使用的 CSS 的 shadow DOM 的根元素 - 换句话说，这允许你从其 shadow DOM 中选择一个自定义元素。
-注意：在shadow DOM之外使用时，这没有任何效果。
+注意：在 shadow DOM 之外使用时，这没有任何效果。
/* Selects a shadow root host */
@@ -34,7 +34,7 @@ 示例
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
-在元素的构造函数中，我们创建style和span元素，用自定义元素的内容填充span，并使用一些CSS规则填充style 元素：
+在元素的构造函数中，我们创建style和span元素，用自定义元素的内容填充span，并使用一些 CSS 规则填充style 元素：
let style = document.createElement('style');
let span = document.createElement('span');
diff --git a/files/zh-cn/web/css/_colon_host_function/index.html b/files/zh-cn/web/css/_colon_host_function/index.html
index 65526f111a9c2f..0a0716734646dd 100644
--- a/files/zh-cn/web/css/_colon_host_function/index.html
+++ b/files/zh-cn/web/css/_colon_host_function/index.html
@@ -18,7 +18,7 @@
最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 {{cssxref(":host-context()")}} 的作用。
-注意：在shadow DOM之外使用时，这没有任何效果。
+注意：在 shadow DOM 之外使用时，这没有任何效果。
/* 选择阴影根元素，仅当它与选择器参数匹配 */
diff --git a/files/zh-cn/web/css/_colon_hover/index.html b/files/zh-cn/web/css/_colon_hover/index.html
index b0a202b40da1a0..c8ce13baf26c96 100644
--- a/files/zh-cn/web/css/_colon_hover/index.html
+++ b/files/zh-cn/web/css/_colon_hover/index.html
@@ -10,11 +10,11 @@
概要
-:hover CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像{{ cssxref(":link") }}, {{ cssxref(":visited") }}, 和 {{ cssxref(":active") }}等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的顺序声明:link－:visited－:hover－:active。
+:hover CSS 伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像{{ cssxref(":link") }}、{{ cssxref(":visited") }} 和 {{ cssxref(":active") }} 等。为了确保生效，:hover 规则需要放在 :link 和 :visited 规则之后，但是在:active 规则之前，按照 LVHA 的顺序声明 :link－:visited－:hover－:active。
-:hover伪类可以在任何伪元素上使用。{{experimental_inline}}
+:hover 伪类可以在任何伪元素上使用。{{experimental_inline}}
-用户的可视客户端比如Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标（鼠标指针）悬停在元素上时提供关联的样式。
+用户的可视客户端比如 Firefox, Internet Explorer, Safari, Opera or Chrome，会在光标（鼠标指针）悬停在元素上时提供关联的样式。
注意: 在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同。 可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。 触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
@@ -31,7 +31,7 @@ 示例
下拉按钮
-使用:hover 伪类可以创建复杂的层叠机制。一个常见用途，比如，创建一个纯CSS的下拉按钮（不使用JavaScript）。 本质是创建如下的CSS：
+使用:hover 伪类可以创建复杂的层叠机制。一个常见用途，比如，创建一个纯 CSS 的下拉按钮（不使用 JavaScript）。 本质是创建如下的 CSS：
div.menu-bar ul ul {
display: none;
@@ -42,7 +42,7 @@ 下拉按钮
}
-HTML内容如下:
+HTML 内容如下：
<div class="menu-bar">
<ul>
@@ -73,13 +73,13 @@ 下拉按钮
</div>
-在 CSS-based dropdown menu example 看示例.
+在 CSS-based dropdown menu example 看示例。
可全图预览的画廊
:hover 伪类可以让你实现一个当鼠标悬停在图片上时全图预览的画廊功能。 在 this demo 看示例。
-注意: 一个类似的效果，是基于 :checked伪类（用于隐藏单选框）实现的，看 this demo，源于 En/CSS/:checked。
+注意： 一个类似的效果，是基于 :checked 伪类（用于隐藏单选框）实现的，看 this demo，源于 En/CSS/:checked。
规范
diff --git a/files/zh-cn/web/css/_colon_in-range/index.html b/files/zh-cn/web/css/_colon_in-range/index.html
index 45bb8e48879e10..491ecbd157f37d 100644
--- a/files/zh-cn/web/css/_colon_in-range/index.html
+++ b/files/zh-cn/web/css/_colon_in-range/index.html
@@ -5,7 +5,7 @@
---
{{CSSRef}}
-in-range CSS 伪类 代表一个 {{htmlelement("input")}} 元素，其当前值处于属性{{htmlattrxref("min", "input")}} 和{{htmlattrxref("max","input")}} 限定的范围之内.
+in-range CSS 伪类 代表一个 {{htmlelement("input")}} 元素，其当前值处于属性{{htmlattrxref("min", "input")}} 和{{htmlattrxref("max","input")}} 限定的范围之内。
/* 该伪类可选定任意的<input>, 但只有在该元素指定了取值范围，并且元素值处于指定范围时才有效*/
input:in-range {
diff --git a/files/zh-cn/web/css/_colon_indeterminate/index.html b/files/zh-cn/web/css/_colon_indeterminate/index.html
index e51b565fb9334a..9a52228091ea05 100644
--- a/files/zh-cn/web/css/_colon_indeterminate/index.html
+++ b/files/zh-cn/web/css/_colon_indeterminate/index.html
@@ -5,7 +5,7 @@
---
{{CSSRef}}
-:indeterminate CSS 伪类 表示状态不确定的表单元素:
+:indeterminate CSS 伪类 表示状态不确定的表单元素：
/* Selects any <input> whose state is indeterminate */
input:indeterminate {
@@ -17,7 +17,7 @@
<input type="checkbox"> 元素，其 indeterminate 属性被 JavaScript设置为 true 。<input type="radio"> 元素, 表单中拥有相同 name值的所有单选按钮都未被选中时。<input type="radio"> 元素，表单中拥有相同 name值的所有单选按钮都未被选中时。- 处于不确定状态的 {{HTMLElement("progress")}} 元素
diff --git a/files/zh-cn/web/css/_colon_invalid/index.html b/files/zh-cn/web/css/_colon_invalid/index.html
index 6c9228bc1e0b2b..7f2f246ae8da13 100644
--- a/files/zh-cn/web/css/_colon_invalid/index.html
+++ b/files/zh-cn/web/css/_colon_invalid/index.html
@@ -71,13 +71,13 @@ 注意
单选钮（Radio buttons）
-若一组单选钮被设定为必须选定一个，在该组中没有按钮被选中的情况，:invalid伪类被应用到该组中的所有按钮。（单选钮组按照name属性共享相同值。）
+若一组单选钮被设定为必须选定一个，在该组中没有按钮被选中的情况，:invalid 伪类被应用到该组中的所有按钮。（单选钮组按照 name 属性共享相同值。）
Gecko 默认
-默认情况下，Gecko不应用:invalid伪类设置的样式。但是，Gecko可以使用{{cssxref(":-moz-ui-invalid")}}伪类的样式（使用{{Cssxref("box-shadow")}} 属性设置红色发光边框）来达到类似的效果，它可以被应用在:invalid伪类的子集中。
+默认情况下，Gecko 不应用 :invalid 伪类设置的样式。但是，Gecko 可以使用 {{cssxref(":-moz-ui-invalid")}} 伪类的样式（使用 {{Cssxref("box-shadow")}} 属性设置红色发光边框）来达到类似的效果，它可以被应用在:invalid 伪类的子集中。
-你可以使用以下CSS禁用红色发光边框,或完全重写它以改变无效输入域的外观：
+你可以使用以下 CSS 禁用红色发光边框，或完全重写它以改变无效输入域的外观：
:invalid {
box-shadow: none;
diff --git a/files/zh-cn/web/css/_colon_is/index.html b/files/zh-cn/web/css/_colon_is/index.html
index 8fc8fe01c83441..784d622371651c 100644
--- a/files/zh-cn/web/css/_colon_is/index.html
+++ b/files/zh-cn/web/css/_colon_is/index.html
@@ -20,10 +20,10 @@
The :is() CSS 伪类 函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
-注意，许多浏览器通过一个更旧的、带前缀的伪类:any()来支持这个功能，包括旧版本的Chrome、Firefox和Safari。这与:is()的工作方式完全相同，只是它需要厂商前缀，不支持复杂的选择器。
+注意，许多浏览器通过一个更旧的、带前缀的伪类:any() 来支持这个功能，包括旧版本的 Chrome、Firefox 和 Safari。这与 :is() 的工作方式完全相同，只是它需要厂商前缀，不支持复杂的选择器。
-/* 选择header, main, footer里的任意一个悬浮状态的段落(p标签) */
+/* 选择 header, main, footer 里的任意一个悬浮状态的段落 (p 标签) */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
@@ -127,7 +127,7 @@ Cross-browser example
简化列表选择器
-:is() 伪类可以大大简化CSS选择器。例如，下面的CSS:
+:is() 伪类可以大大简化 CSS 选择器。例如，下面的 CSS:
/* 3-deep (or more) unordered lists use a square */
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
@@ -146,7 +146,7 @@ 简化列表选择器
}
-... 可以被替换为:
+... 可以被替换为：
/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
@@ -163,9 +163,9 @@ 简化列表选择器
Simplifying section selectors
-:is 伪类在处理HTML5 sections and headings特别有用。 由于 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} 经常嵌套在一起, 没有 :is()的话匹配其他元素将会很棘手。
+:is 伪类在处理 HTML5 sections and headings特别有用。 由于 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} 经常嵌套在一起，没有 :is()的话匹配其他元素将会很棘手。
-例如, 在没有 :is()的情况下, 在不同深度对所有{{HTMLElement("h1")}} 素进行样式化可能非常复杂:
+例如，在没有 :is()的情况下，在不同深度对所有{{HTMLElement("h1")}} 素进行样式化可能非常复杂：
/* Level 0 */
h1 {
@@ -186,7 +186,7 @@ Simplifying section selectors
/* ... don't even think about it! */
-使用 :is()之后,它变的非常简单:
+使用 :is()之后，它变的非常简单：
/* Level 0 */
h1 {
diff --git a/files/zh-cn/web/css/_colon_lang/index.html b/files/zh-cn/web/css/_colon_lang/index.html
index 1249bad6037fa6..b6a774cd9853b4 100644
--- a/files/zh-cn/web/css/_colon_lang/index.html
+++ b/files/zh-cn/web/css/_colon_lang/index.html
@@ -9,13 +9,13 @@
-/* 选取任意的英文（en)段落 */
+/* 选取任意的英文（en) 段落 */
p:lang(en) {
quotes: '\201C' '\201D' '\2018' '\2019';
-}
+}
-注意: 在HTML中, 语言是通过{{htmlattrxref("lang")}} 属性,和 {{HTMLElement("meta")}} 元素的组合来决定的, 也可能是通过协议的信息来确定（例如HTTP头）. 对于其他文档类型，也可能存在其他用于确定语言的方法。
+注意： 在 HTML 中，语言是通过{{htmlattrxref("lang")}} 属性，和 {{HTMLElement("meta")}} 元素的组合来决定的，也可能是通过协议的信息来确定（例如 HTTP 头）. 对于其他文档类型，也可能存在其他用于确定语言的方法。
语法
@@ -28,12 +28,12 @@ 参数
<language-code>- {{cssxref("<string>")}} 代表了你想定位的语言. 可接受的值为在HTML 规范中指定的值.
+ - {{cssxref("<string>")}} 代表了你想定位的语言。可接受的值为在HTML 规范中指定的值。
Example
-在这个例子中, :lang() 伪类使用子选择器来匹配引用元素({{htmlElement("q")}})的父元素. 需要注意的是，此处演示的方法并不是唯一的，最好的方法需要依据文档类型来确定。还需要注意的是， {{glossary("Unicode")}} 值用于指定一些特殊字符的引用.
+在这个例子中，:lang() 伪类使用子选择器来匹配引用元素 ({{htmlElement("q")}}) 的父元素。需要注意的是，此处演示的方法并不是唯一的，最好的方法需要依据文档类型来确定。还需要注意的是， {{glossary("Unicode")}} 值用于指定一些特殊字符的引用。
HTML
@@ -67,12 +67,12 @@ 规范
{{ SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()') }}
{{ Spec2('CSS4 Selectors') }}
- 无变化.
+ 无变化。
{{ SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()') }}
{{ Spec2('CSS3 Selectors') }}
- 没有明显的变化.
+ 没有明显的变化。
{{ SpecName('CSS2.1', 'selector.html#lang', ':lang()') }}
diff --git a/files/zh-cn/web/css/_colon_last-child/index.html b/files/zh-cn/web/css/_colon_last-child/index.html
index 95b2b7afb98ffc..e6f6c8858845f5 100644
--- a/files/zh-cn/web/css/_colon_last-child/index.html
+++ b/files/zh-cn/web/css/_colon_last-child/index.html
@@ -18,9 +18,9 @@ 示例
HTML 内容
<ul>
- <li>此元素背景色不是lime</li>
- <li>我的也不是lime。</li>
- <li>我的才是lime！ :)</li>
+ <li>此元素背景色不是 lime</li>
+ <li>我的也不是 lime。</li>
+ <li>我的才是 lime！ :)</li>
</ul>
CSS 内容
diff --git a/files/zh-cn/web/css/_colon_last-of-type/index.html b/files/zh-cn/web/css/_colon_last-of-type/index.html
index faf7dd7129d881..421af1dacc35d2 100644
--- a/files/zh-cn/web/css/_colon_last-of-type/index.html
+++ b/files/zh-cn/web/css/_colon_last-of-type/index.html
@@ -7,7 +7,7 @@
概述
-:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。
+:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似 Parent tagName:last-of-type 的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。
语法
@@ -30,11 +30,11 @@ 示例
<p>
<em>我没有颜色 :(</em><br>
- <span><em>我有颜色!</em></span><br>
+ <span><em>我有颜色！</em></span><br>
<strong>我没有颜色 :(</strong><br>
<em>我有颜色 :D</em><br>
<span>
- <em>我在子元素里，但没有颜色!</em><br>
+ <em>我在子元素里，但没有颜色！</em><br>
<span style="text-decoration:line-through;"> 我没有颜色 </span><br>
<em>我却有颜色！</em><br>
</span><br>
diff --git a/files/zh-cn/web/css/_colon_left/index.html b/files/zh-cn/web/css/_colon_left/index.html
index 730e44de9ce811..9de8ced3a22dd1 100644
--- a/files/zh-cn/web/css/_colon_left/index.html
+++ b/files/zh-cn/web/css/_colon_left/index.html
@@ -9,17 +9,17 @@
---
{{ CSSRef() }}
-:left CSS 伪类, 需要和@规则 {{cssxref("@page")}} 配套使用, 对打印文档的左侧页设置CSS样式.
+:left CSS 伪类, 需要和@规则 {{cssxref("@page")}} 配套使用，对打印文档的左侧页设置 CSS 样式。
/* 设置打印时的左侧文档样式 */
@page :left {
margin: 2in 3in;
}
-打印文档的"左"或"右"是由书写方向相关的. 举个栗子, "从左到右"的书写方向中第一页应当使用 {{Cssxref(":right")}} 配置; "从右至左"的书写方向中第一页应当使用 :left 配置.
+打印文档的"左"或"右"是由书写方向相关的。举个栗子，"从左到右"的书写方向中第一页应当使用 {{Cssxref(":right")}} 配置; "从右至左"的书写方向中第一页应当使用 :left 配置。
-Note: 并不是所有样式属性都能应用在此选择器内. 仅仅 {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, 和 {{ Cssxref("background") }} 等打印时需要的属性可以使用. 其他属性将直接忽略, 并且可以使用的属性也只会在打印时生效, 显示时不会生效.
+Note: 并不是所有样式属性都能应用在此选择器内。仅仅 {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, 和 {{ Cssxref("background") }} 等打印时需要的属性可以使用。其他属性将直接忽略，并且可以使用的属性也只会在打印时生效，显示时不会生效。
参数
diff --git a/files/zh-cn/web/css/_colon_link/index.html b/files/zh-cn/web/css/_colon_link/index.html
index 71cd5f4a3df502..923b1fa65671a1 100644
--- a/files/zh-cn/web/css/_colon_link/index.html
+++ b/files/zh-cn/web/css/_colon_link/index.html
@@ -7,7 +7,7 @@
总结
-:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如{{cssxref(":hover")}}选择器，{{cssxref(":active")}}选择器，{{cssxref(":visited")}}选择器）。为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
+:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如{{cssxref(":hover")}}选择器，{{cssxref(":active")}}选择器，{{cssxref(":visited")}}选择器）。为了可以正确地渲染链接元素的样式，:link 伪类选择器应当放在其他伪类选择器的前面，并且遵循 LVHA 的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
例子
@@ -38,12 +38,12 @@ 规格详细
{{ SpecName('CSS3 Selectors', '#link', ':link') }}
{{ Spec2('CSS3 Selectors') }}
- 无变化.
+ 无变化。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}
{{ Spec2('CSS2.1') }}
- 提升严格性为仅限于a标签元素
+ 提升严格性为仅限于 a 标签元素
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}
diff --git a/files/zh-cn/web/css/_colon_not/index.html b/files/zh-cn/web/css/_colon_not/index.html
index b13794b935f0d6..ff8a2d6edf376e 100644
--- a/files/zh-cn/web/css/_colon_not/index.html
+++ b/files/zh-cn/web/css/_colon_not/index.html
@@ -26,7 +26,7 @@
可以利用这个伪类写一个完全没有用处的选择器。例如， :not(*) 匹配任何非元素的元素，因此，这个规则将永远不会被应用。
可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。
:not(.foo) 将匹配任何非 .foo 的元素，包括 {{HTMLElement("html")}} 和 {{HTMLElement("body")}}。这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素 {{HTMLElement("table")}} 内部的 {{HTMLElement("a")}} 上, 因为 {{HTMLElement("tr")}}将会被 :not(table) 这部分选择器匹配。
+ 这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素 {{HTMLElement("table")}} 内部的 {{HTMLElement("a")}} 上，因为 {{HTMLElement("tr")}}将会被 :not(table) 这部分选择器匹配。
diff --git a/files/zh-cn/web/css/_colon_nth-child/index.html b/files/zh-cn/web/css/_colon_nth-child/index.html
index 150fc72e6f205c..3e514951b1092d 100644
--- a/files/zh-cn/web/css/_colon_nth-child/index.html
+++ b/files/zh-cn/web/css/_colon_nth-child/index.html
@@ -11,12 +11,12 @@
概述
-:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：
+:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：
0n+3 或简单的 3 匹配第三个元素。1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0 时，2n+0=0，第 0 个元素不存在，因为是从 1 开始排序)。你可以使用关键字 even 来替换此表达式。2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。3n+4 匹配位置为 4、7、10、13...的元素。
@@ -33,19 +33,19 @@ 选择器示例
tr:nth-child(2n+1)- 表示HTML表格中的奇数行。
+ - 表示 HTML 表格中的奇数行。
tr:nth-child(odd)- 表示HTML表格中的奇数行。
+ - 表示 HTML 表格中的奇数行。
tr:nth-child(2n)- 表示HTML表格中的偶数行。
+ - 表示 HTML 表格中的偶数行。
tr:nth-child(even)- 表示HTML表格中的偶数行。
+ - 表示 HTML 表格中的偶数行。
span:nth-child(0n+1)- 表示子元素中第一个且为span的元素，与 {{Cssxref(":first-child")}} 选择器作用相同。
+ - 表示子元素中第一个且为 span 的元素，与 {{Cssxref(":first-child")}} 选择器作用相同。
span:nth-child(1)- 表示父元素中子元素为第一的并且名字为span的标签被选中
+ - 表示父元素中子元素为第一的并且名字为 span 的标签被选中
span:nth-child(-n+3)- 匹配前三个子元素中的span元素。
+ - 匹配前三个子元素中的 span 元素。
Detailed example
diff --git a/files/zh-cn/web/css/_colon_nth-last-child/index.html b/files/zh-cn/web/css/_colon_nth-last-child/index.html
index 226fb195a8a407..f045002666d0c2 100644
--- a/files/zh-cn/web/css/_colon_nth-last-child/index.html
+++ b/files/zh-cn/web/css/_colon_nth-last-child/index.html
@@ -12,33 +12,33 @@
:nth-last-child() 这个CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素
/* 在所有兄弟节点中，从后往前
- 选择所有4的倍数的节点 */
+ 选择所有 4 的倍数的节点 */
:nth-last-child(4n) {
color: lime;
}
-注意: 这个伪类和 {{Cssxref(":nth-child")}} 基本一致, 但它是从结尾计数, 而不是从开始计数.
+注意： 这个伪类和 {{Cssxref(":nth-child")}} 基本一致，但它是从结尾计数，而不是从开始计数。
语法
-nth-last-child伪类接受一个参数, 用来作为一个模式，从后往前匹配元素.
+nth-last-child伪类接受一个参数，用来作为一个模式，从后往前匹配元素。
Keyword values
odd- 代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是奇数，比如: 1, 3, 5等.
+ - 代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是奇数，比如: 1, 3, 5 等。
even- 代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是偶数，比如: 2, 4, 6等.
+ - 代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是偶数，比如: 2, 4, 6 等。
Functional notation
<An+B>- 代表一些元素，它们在所在兄弟节点中的数字位置满足模式
An+B, n是0或者任意的正整数. 从结尾开始计算的第一个元素的索引值是1. A 和 B 必须都是 {{cssxref("<integer>")}}.
+ - 代表一些元素，它们在所在兄弟节点中的数字位置满足模式
An+B, n是 0 或者任意的正整数。从结尾开始计算的第一个元素的索引值是1. A 和 B 必须都是 {{cssxref("<integer>")}}.
Formal syntax
@@ -51,19 +51,19 @@ 选择器示例
tr:nth-last-child(odd) or tr:nth-last-child(2n+1)- 表示HTML表的倒数的奇数行:1、3、5等。
+ - 表示 HTML 表的倒数的奇数行:1、3、5 等。
tr:nth-last-child(even) or tr:nth-last-child(2n)- 表示HTML表的倒数的偶数行:2、4、6等。
+ - 表示 HTML 表的倒数的偶数行:2、4、6 等。
:nth-last-child(7)- 表示倒数第7个元素。
+ - 表示倒数第 7 个元素。
:nth-last-child(5n)- 表示倒数的第5、10、15等元素。
+ - 表示倒数的第 5、10、15 等元素。
:nth-last-child(3n+4)- 表示倒数的第4、7、10、13等元素。
+ - 表示倒数的第 4、7、10、13 等元素。
:nth-last-child(-n+3)- 表示一组兄弟节点中的最后三个元素。
p:nth-last-child(n) or p:nth-last-child(n+1)- 表示一组兄弟节点中的每个
<p>元素。这与一个简单的p选择器相同。(由于n从0开始，而最后一个元素从1开始，n和n+1都会选择相同的元素。)
+ - 表示一组兄弟节点中的每个
<p>元素。这与一个简单的p选择器相同。(由于n从 0 开始，而最后一个元素从 1 开始，n和n+1都会选择相同的元素。)
p:nth-last-child(1) or p:nth-last-child(0n+1)- 表示所有处于兄弟节点中倒数第一位的元素
<p>。这与{{cssxref(":last-child")}}选择器相同。
diff --git a/files/zh-cn/web/css/_colon_nth-of-type/index.html b/files/zh-cn/web/css/_colon_nth-of-type/index.html
index 2cc578dc0d4e2c..6f1820f3077d2b 100644
--- a/files/zh-cn/web/css/_colon_nth-of-type/index.html
+++ b/files/zh-cn/web/css/_colon_nth-of-type/index.html
@@ -11,7 +11,7 @@
---
{{CSSRef}}
-:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。
+:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签，用 n 来筛选出在一组兄弟节点的位置。
/* 在每组兄弟元素中选择第四个 <p> 元素 */
p:nth-of-type(4n) {
diff --git a/files/zh-cn/web/css/_colon_only-child/index.html b/files/zh-cn/web/css/_colon_only-child/index.html
index 1f532065042f2d..63bc734195ade9 100644
--- a/files/zh-cn/web/css/_colon_only-child/index.html
+++ b/files/zh-cn/web/css/_colon_only-child/index.html
@@ -13,7 +13,7 @@
-CSS伪类:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.
+CSS伪类:only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然，前者的权重会低一点。
/* Selects each <p>, but only if it is the */
/* only child of its parent */
@@ -22,7 +22,7 @@
}
-Note: 在起初定义, 被选择的元素必须拥有一个父级元素. 从 Selectors Level 4 开始, 这不再是必须的了.
+Note: 在起初定义，被选择的元素必须拥有一个父级元素。从 Selectors Level 4 开始，这不再是必须的了。
语法
diff --git a/files/zh-cn/web/css/_colon_placeholder-shown/index.html b/files/zh-cn/web/css/_colon_placeholder-shown/index.html
index 86fd5a91c95bab..f0321a96ce2443 100644
--- a/files/zh-cn/web/css/_colon_placeholder-shown/index.html
+++ b/files/zh-cn/web/css/_colon_placeholder-shown/index.html
@@ -5,9 +5,9 @@
---
{{CSSRef}}{{SeeCompatTable}}
-:placeholder-shown CSS 伪类 在 {{htmlElement("input")}} 或 {{htmlElement("textarea")}} 元素显示 placeholder text 时生效.
+:placeholder-shown CSS 伪类 在 {{htmlElement("input")}} 或 {{htmlElement("textarea")}} 元素显示 placeholder text 时生效。
-/* 选择所有显示占位符(placeholder)的元素 */
+/* 选择所有显示占位符 (placeholder) 的元素 */
:placeholder-shown {
border: 2px solid silver;
}
@@ -41,7 +41,7 @@ 结果
超出文本
-在分辨率较小的设备上, 输入框或者其他表单控件可能会变的很窄. 这个选择器可以使得占位符文本缩短. 这个选择器经常和 {{cssxref("text-overflow")}} 一起使用.
+在分辨率较小的设备上，输入框或者其他表单控件可能会变的很窄。这个选择器可以使得占位符文本缩短. 这个选择器经常和 {{cssxref("text-overflow")}} 一起使用。
HTML
diff --git a/files/zh-cn/web/css/_colon_read-write/index.html b/files/zh-cn/web/css/_colon_read-write/index.html
index 1a84810f89ef05..834cfbe5c4be8f 100644
--- a/files/zh-cn/web/css/_colon_read-write/index.html
+++ b/files/zh-cn/web/css/_colon_read-write/index.html
@@ -5,7 +5,7 @@
---
{{CSSRef}}
-:read-write CSS 伪类 代表一个元素（例如可输入文本的 input元素）可以被用户编辑。
+:read-write CSS 伪类 代表一个元素（例如可输入文本的 input 元素）可以被用户编辑。
/* 选择所有可编辑的 <input> 元素 */
/* Firefox 中需要加前缀 */
diff --git a/files/zh-cn/web/css/_colon_scope/index.html b/files/zh-cn/web/css/_colon_scope/index.html
index 011862f83a7693..4503abb6188809 100644
--- a/files/zh-cn/web/css/_colon_scope/index.html
+++ b/files/zh-cn/web/css/_colon_scope/index.html
@@ -20,7 +20,7 @@
background-color: lime;
}
-当前，在样式表中使用时, :scope 等效于 {{cssxref(":root")}}，因为目前尚无一种方法来显式建立作用域元素。当从DOM API使用，如（{{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, 或 {{domxref("Element.closest()")}}）, :scope 匹配你调用API的元素。
+当前，在样式表中使用时，:scope 等效于 {{cssxref(":root")}}，因为目前尚无一种方法来显式建立作用域元素。当从 DOM API 使用，如（{{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, 或 {{domxref("Element.closest()")}}）, :scope 匹配你调用 API 的元素。
用法
@@ -114,7 +114,7 @@ 参考
- {{cssxref(":root")}} 与 {{cssxref("Pseudo-classes")}}
- - 使用选择器定位DOM元素
+ - 使用选择器定位 DOM 元素
- {{domxref("Element.querySelector()")}} 与 {{domxref("Element.querySelectorAll()")}}
- {{domxref("Document.querySelector()")}} 与 {{domxref("Document.querySelectorAll()")}}
- {{domxref("DocumentFragment.querySelector()")}} 与 {{domxref("DocumentFragment.querySelectorAll()")}}
diff --git a/files/zh-cn/web/css/_colon_target/index.html b/files/zh-cn/web/css/_colon_target/index.html
index 072c6326510b84..fcba06da6e420b 100644
--- a/files/zh-cn/web/css/_colon_target/index.html
+++ b/files/zh-cn/web/css/_colon_target/index.html
@@ -8,18 +8,18 @@
---
{{CSSRef}}
-:target CSS 伪类 代表一个唯一的页面元素(目标元素)，其{{htmlattrxref("id")}} 与当前URL片段匹配 .
+:target CSS 伪类 代表一个唯一的页面元素 (目标元素)，其{{htmlattrxref("id")}} 与当前 URL 片段匹配。
-
/* 选择一个ID与当前URL片段匹配的元素*/
+/* 选择一个 ID 与当前 URL 片段匹配的元素*/
:target {
border: 2px solid black;
}
-例如, 以下URL拥有一个片段 (以#标识的) ，该片段指向一个ID为section2的页面元素:
+例如，以下 URL 拥有一个片段 (以#标识的) ，该片段指向一个 ID 为 section2 的页面元素：
http://www.example.com/index.html#section2
-若当前URL等于上面的URL，下面的元素可以通过 :target选择器被选中：
+若当前 URL 等于上面的 URL，下面的元素可以通过 :target 选择器被选中：
<section id="section2">Example</section>
@@ -64,7 +64,7 @@ CSS
margin-right: .25em;
}
-/*在目标元素中使用italic样式*/
+/*在目标元素中使用 italic 样式*/
p:target i {
color: red;
}
@@ -73,11 +73,11 @@ 结果
{{EmbedLiveSample('一个内容列表', 500, 300)}}
-纯CSS高亮
+纯 CSS 高亮
-你可以不使用任何Javascript代码，只使用:target伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS就会更改其display 以便显示它们。
+你可以不使用任何 Javascript 代码，只使用:target伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS 就会更改其display 以便显示它们。
-
+
HTML
@@ -167,7 +167,7 @@ CSS
结果
-{{EmbedLiveSample('纯CSS高亮', 500, 220)}}
+{{EmbedLiveSample('纯 CSS 高亮', 500, 220)}}
规范
diff --git a/files/zh-cn/web/css/_colon_visited/index.html b/files/zh-cn/web/css/_colon_visited/index.html
index 77a5a44be7bd08..c2bca1179be120 100644
--- a/files/zh-cn/web/css/_colon_visited/index.html
+++ b/files/zh-cn/web/css/_colon_visited/index.html
@@ -28,7 +28,7 @@ 限制
- 允许使用的 CSS 属性为{{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, 和{{ cssxref("outline-color") }}。
- 允许使用的 SVG 属性为{{SVGAttr("fill")}} 和 {{SVGAttr("stroke")}}。
- - 允许使用的样式的 αlpha 分量(透明度)将被忽略。 设置在
:visited中的样式将使用元素的非:visited 访问状态的 αlpha 分量， 如果该分量为0，这个样式将被完全忽略。
+ - 允许使用的样式的 αlpha 分量 (透明度) 将被忽略。 设置在
:visited中的样式将使用元素的非:visited 访问状态的 αlpha 分量， 如果该分量为 0，这个样式将被完全忽略。
- 虽然这些样式可以改变用户最终的颜色外观，但 {{domxref("window.getComputedStyle")}} 方法将存在并且始终返回非访问颜色的值。
@@ -48,7 +48,7 @@ HTML
CSS
a {
- /* 指定某些属性的默认值，允许他们使用：visited状态进行样式设置 */
+ /* 指定某些属性的默认值，允许他们使用：visited 状态进行样式设置 */
background-color: white;
border: 1px solid white;
}
@@ -95,7 +95,7 @@ 规范
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}
{{ Spec2('CSS2.1') }}
- 取消:visited只适用于 {{ HTMLElement("a") }} 元素的限制。由于隐私原因，浏览器会限制该行为。
+ 取消:visited 只适用于 {{ HTMLElement("a") }} 元素的限制。由于隐私原因，浏览器会限制该行为。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}
diff --git a/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html b/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html
index 0af0760b0484da..38927c8a6b66ee 100644
--- a/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html
+++ b/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html
@@ -9,7 +9,7 @@
---
{{CSSRef}}{{Non-standard_header}}
-CSS伪元素 ::-moz-progress-bar 是{{HTMLElement("progress")}} 元素中，Mozilla独有的特性（Mozilla extension），用于对进度条完成的部分进行选择。
+CSS伪元素 ::-moz-progress-bar 是{{HTMLElement("progress")}} 元素中，Mozilla 独有的特性（Mozilla extension），用于对进度条完成的部分进行选择。
如果你想选择未完成的部分，请直接选择 {{HTMLElement("progress")}} 。
diff --git a/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.html b/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.html
index 2abf67beb2665a..14a14afd7a576a 100644
--- a/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.html
+++ b/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.html
@@ -3,7 +3,7 @@
slug: 'Web/CSS/::-moz-range-progress'
tags:
- CSS
- - 'CSS:Mozilla扩展'
+ - 'CSS:Mozilla 扩展'
- 伪元素
- 选择器
- 非标准化
@@ -14,7 +14,7 @@
The ::-moz-range-progress CSS 伪元素 是一个 Mozilla 扩展。它代表了指示器在其中滑动的轨道的下部（即凹槽）是一个 type="range" 类型的 {{HTMLElement("input")}} 。此部分对应的值低于揪揪当前选择的值（即虚拟旋钮）。
-注意: 在 <input type="range">上应用::-moz-range-progress 不会匹配任何元素，也不会有任何效果。
+注意： 在 <input type="range">上应用::-moz-range-progress 不会匹配任何元素，也不会有任何效果。
语法
@@ -55,7 +55,7 @@ 浏览器兼容性
相关阅读
- - Gecko用于设置范围输入的其他部分样式的伪元素：
+
- Gecko 用于设置范围输入的其他部分样式的伪元素：
- {{cssxref("::-moz-range-thumb")}} 代表在凹槽中滑动的指示器
- {{cssxref("::-moz-range-track")}} 代表有揪揪滑动的凹槽
@@ -66,6 +66,6 @@ 相关阅读
- {{cssxref("::-ms-fill-upper")}}, Internet Explorer 和 Edge 支持的伪元素
- - CSS-Tricks：使用CSS设置跨浏览器兼容范围输入的样式
+ - CSS-Tricks：使用 CSS 设置跨浏览器兼容范围输入的样式
- QuirksMode：样式和脚本滑块
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.html
index cca8bfc7391f6a..a5a6ac8f3d40cc 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.html
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.html
@@ -13,7 +13,7 @@ 概述
::-webkit-progress-bar CSS 伪元素 选择 {{HTMLElement("progress")}} 元素的未完成部分。 {{ cssxref("::-webkit-progress-value") }} 选择完成的部分。::-webkit-progress-bar 是{{cssxref("::-webkit-progress-inner-element")}} 伪元素的子元素，同时是 {{cssxref("::-webkit-progress-value")}} 伪元素的父元素。
-Note: 为了能让::-webkit-progress-value起作用,需要添加CSS {{cssxref("-webkit-appearance")}} 至 <progress> 元素.
+Note: 为了能让::-webkit-progress-value起作用，需要添加 CSS {{cssxref("-webkit-appearance")}} 至 <progress> 元素。
规范
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.html
index 65765175ac92bf..f0ae8e4f5c971a 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.html
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.html
@@ -12,7 +12,7 @@
::-webkit-progress-inner-element CSS 伪元素选择了 {{HTMLElement("progress")}} 元素。他是 {{cssxref("::-webkit-progress-bar")}} 伪元素的父元素。
-注意: 为了使 ::-webkit-progress-value 生效， <progress> 元素的{{cssxref("-webkit-appearance")}} 需要设置为 none 。
+注意： 为了使 ::-webkit-progress-value 生效， <progress> 元素的{{cssxref("-webkit-appearance")}} 需要设置为 none 。
例子
@@ -37,13 +37,13 @@ Result
{{EmbedLiveSample("Example", 200, 50)}}
-应用了上述样式的进度条如下:
+应用了上述样式的进度条如下：
规范
-不属于任何规范。这是WebKit/Blink专有的一个伪元素。
+不属于任何规范。这是 WebKit/Blink 专有的一个伪元素。
浏览器兼容性
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html
index 21b62dee43256a..852e0fbfb1beb6 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html
@@ -15,12 +15,12 @@
-注意: 为了使 ::-webkit-progress-value 生效， <progress> 元素的{{cssxref("-webkit-appearance")}} 需要设置为 none 。
+注意： 为了使 ::-webkit-progress-value 生效， <progress> 元素的{{cssxref("-webkit-appearance")}} 需要设置为 none 。
说明
-不属于任何规范。这是WebKit/Blink专有的一个伪元素。
+不属于任何规范。这是 WebKit/Blink 专有的一个伪元素。
示例
@@ -56,7 +56,7 @@ 浏览器兼容性
参见
- - WebKit/Blink使用的用来修改{{HTMLElement("progress")}}元素其他部分样式的伪元素：
+
- WebKit/Blink 使用的用来修改{{HTMLElement("progress")}}元素其他部分样式的伪元素：
- {{ cssxref("::-webkit-progress-bar") }}
- {{ cssxref("::-webkit-progress-inner-element") }}
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md
index 537fe2066195ba..4bbf8161a23fe9 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.md
@@ -18,7 +18,7 @@ translation_of: 'Web/CSS/::-webkit-scrollbar'
> **备注：** 如果没有设置 `overflow:scroll;`，元素的滚动条将不会显示。
-> **备注：** `::-webkit-scrollbar` 仅在基于 [Blink](https://www.chromium.org/blink) 或 [WebKit](https://webkit.org) 的浏览器（例如, Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及[其它基于 WebKit 的浏览器](https://zh.wikipedia.org/wiki/网页浏览器列表#基於WebKit排版引擎)）上可用。滚动条样式的标准方法可用于 {{cssxref("scrollbar-color")}} 和 {{cssxref("scrollbar-width")}}。
+> **备注：** `::-webkit-scrollbar` 仅在基于 [Blink](https://www.chromium.org/blink) 或 [WebKit](https://webkit.org) 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及[其它基于 WebKit 的浏览器](https://zh.wikipedia.org/wiki/网页浏览器列表#基於WebKit排版引擎)）上可用。滚动条样式的标准方法可用于 {{cssxref("scrollbar-color")}} 和 {{cssxref("scrollbar-width")}}。
## CSS 滚动条选择器
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
index 32d1b0145b98b4..d8437630f8b31f 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
@@ -8,7 +8,7 @@
---
::-webkit-slider-runnable-track
- 表示其在type为range的input标签内中的滑块凹槽,也就是滑块可滑动的区域
+表示其在 type 为 range 的 input 标签内中的滑块凹槽，也就是滑块可滑动的区域
@@ -18,7 +18,7 @@
-使用方法:
+使用方法
input[type=range]::-webkit-slider-runnable-track{
@@ -30,7 +30,7 @@ 使用方法:
规范
-::-webkit-slider-runnable-track不是任何规范的一部分。这是WebKit/Blink特有的伪元素(也就是chrome/sarfri浏览器内核特有的)
+::-webkit-slider-runnable-track 不是任何规范的一部分。这是 WebKit/Blink 特有的伪元素 (也就是 chrome/safari 浏览器内核特有的)
另请参阅
diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html
index 41154327453076..356cfe399f5252 100644
--- a/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html
@@ -10,11 +10,11 @@ 总结
::-webkit-slider-thumb
-这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效
+这是 type 为 range 的 input 标签内的一种伪类样式，用于设置 range 的滑块的具体样式，该伪类只在内核为 webkit/blink 的浏览器中有效
使用方式
-该伪类需要配和::-webkit-slider-runnable-track使用,否则会没有效果.......
+该伪类需要配和::-webkit-slider-runnable-track使用，否则会没有效果.......
input[type=range]::-webkit-slider-thumb{
-webkit-appearance: none;/*清除默认样式*/
@@ -22,7 +22,7 @@
使用方式
width:5vw;/*设置滑块宽度*/
background:#000;/*设置背景色*/
border-radius:10vw 10vw;/*加个圆角边*/
- margin-top:-1vw;/*使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/
+ margin-top:-1vw;/*使用 position 的话会导致滑块不滑动，但是绑定的 value 是改变的，所以这里使用 margin-top 去做定位*/
}
input[type=range]::-webkit-slider-runnable-track{
border-radius: 30px;
@@ -32,7 +32,7 @@ 使用方式
规范
-这不是任何规范中的一部分,这是webkit/bink内核特有的(chrome/safari)
+这不是任何规范中的一部分，这是 webkit/bink 内核特有的 (chrome/safari)
另请参阅
diff --git a/files/zh-cn/web/css/_doublecolon_after/index.html b/files/zh-cn/web/css/_doublecolon_after/index.html
index 958b0a62201a30..a00fc1815d4d03 100644
--- a/files/zh-cn/web/css/_doublecolon_after/index.html
+++ b/files/zh-cn/web/css/_doublecolon_after/index.html
@@ -2,7 +2,7 @@
title: '::after (:after)'
slug: 'Web/CSS/::after'
tags:
- - CSS伪元素
+ - CSS 伪元素
- getComputedStyle
- getPropertyValue
- setProperty
@@ -19,7 +19,7 @@
content: "→";
}
-{{ fx_minversion_note("3.5", "Firefox 3.5之前版本仅实现了CSS 2.0版本的语法 :after. 且不允许在 position, float, list-style-* 等属性中使用。Firefox 3.5开始没有了这项限制。") }}
+{{ fx_minversion_note("3.5", "Firefox 3.5 之前版本仅实现了 CSS 2.0 版本的语法 :after. 且不允许在 position, float, list-style-* 等属性中使用。Firefox 3.5 开始没有了这项限制。") }}
语法
@@ -27,9 +27,9 @@ 语法
element::after { style properties } /* CSS3 语法 */
-::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。
+::after 表示法是在CSS 3 中引入的，::符号是用来区分伪类和伪元素的。支持 CSS3 的浏览器同时也都支持 CSS2 中引入的表示法:after。
-注: IE8仅支持:after。
+注： IE8 仅支持:after。
示例
@@ -39,16 +39,16 @@ 简单用法
<p class="boring-text">这是些无聊的文字</p>
<p>这是不无聊也不有趣的文字</p>
-<p class="exciting-text">在MDN上做贡献简单又轻松。
+<p class="exciting-text">在 MDN 上做贡献简单又轻松。
按右上角的编辑按钮添加新示例或改进旧示例！</p>
.exciting-text::after {
- content: "<- 让人兴兴兴奋!";
+ content: "<- 让人兴兴兴奋！";
color: green;
}
.boring-text::after {
- content: "<- 无聊!";
+ content: "<- 无聊！";
color: red;
}
@@ -58,7 +58,7 @@ 输出
装饰用法
-我们几乎可以用想要的任何方法给 {{ cssxref("content") }} 属性里的文字和图片的加上样式.
+我们几乎可以用想要的任何方法给 {{ cssxref("content") }} 属性里的文字和图片的加上样式。
<span class="ribbon">Notice where the orange box is.</span>
@@ -79,7 +79,7 @@ 输出
提示用法
-接下来的示例展示了用::after伪元素，attr()CSS表达式和一个自定义数据属性 data-descr 创建一个纯CSS, 词汇表提示工具。在单独页面看这个例子。
+接下来的示例展示了用::after伪元素，attr()CSS 表达式和一个自定义数据属性 data-descr 创建一个纯 CSS，词汇表提示工具。在单独页面看这个例子。
<p>这是上面代码的实现<br />
我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
@@ -128,12 +128,12 @@ 规范
{{ SpecName('CSS3 Selectors', '#gen-content', '::after') }}
{{ Spec2('CSS2.1') }}
- 双冒号.
+ 双冒号。
{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }}
{{ Spec2('CSS2.1') }}
- 最初版本,使用单冒号
+ 最初版本，使用单冒号
diff --git a/files/zh-cn/web/css/_doublecolon_before/index.html b/files/zh-cn/web/css/_doublecolon_before/index.html
index 4a54b42fc5df8c..8209b05fc8e2b7 100644
--- a/files/zh-cn/web/css/_doublecolon_before/index.html
+++ b/files/zh-cn/web/css/_doublecolon_before/index.html
@@ -6,14 +6,14 @@
{{CSSRef}}
-CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 {{ cssxref("content") }} 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
+CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 {{ cssxref("content") }} 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
/* Add a heart before links */
a::before {
content: "♥";
}
-注意: 由::before 和::after 生成的伪元素 包含在元素格式框内， 因此不能应用在替换元素上， 比如{{htmlelement("img")}}或{{htmlelement("br")}} 元素。
+注意： 由::before 和::after 生成的伪元素 包含在元素格式框内， 因此不能应用在替换元素上， 比如{{htmlelement("img")}}或{{htmlelement("br")}} 元素。
语法
@@ -21,13 +21,13 @@ 语法
/* CSS3 语法 */
element::before { 样式 }
-/* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */
+/*（单冒号）CSS2 过时语法 (仅用来支持 IE8) */
element:before { 样式 }
-/* 在每一个p元素前插入内容 */
+/* 在每一个 p 元素前插入内容 */
p::before { content: "Hello world!"; }
-CSS3 引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。
+CSS3 引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受由 CSS 2 引入的 :before 写法。
示例
@@ -37,7 +37,7 @@ 加入引用标记
HTML 内容
-<q>一些引用</q>, 他说, <q>比没有好。</q>.
+<q>一些引用</q>, 他说，<q>比没有好。</q>.
CSS 内容
@@ -142,7 +142,7 @@ 最终结果
注释
-
在Firefox3.5中，fixed绝对定位的布局不被允许在元素前生成一个独立的元素（按照CSS规范，:after :before 伪类元素与其他盒模型元素是可以相互影响的，就像他们是真正的元素一样，不过是被插入到相关元素中罢了），他们可以被用来对非表格布局进行改善（例：实现元素在中心位置），只要置于中心的内容包含在元素中,那么内容的前后列不能够被添加前置或后置的兄弟元素。（i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after）（记住，一定要给float元素添加width属性，否则它将不会浮动）
+在 Firefox3.5 中，fixed 绝对定位的布局不被允许在元素前生成一个独立的元素（按照 CSS 规范，:after :before 伪类元素与其他盒模型元素是可以相互影响的，就像他们是真正的元素一样，不过是被插入到相关元素中罢了），他们可以被用来对非表格布局进行改善（例：实现元素在中心位置），只要置于中心的内容包含在元素中，那么内容的前后列不能够被添加前置或后置的兄弟元素。（i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after）（记住，一定要给 float 元素添加 width 属性，否则它将不会浮动）
HTML 内容
diff --git a/files/zh-cn/web/css/_doublecolon_cue/index.html b/files/zh-cn/web/css/_doublecolon_cue/index.html
index 11502325d6994f..9fde31dcc3e8bd 100644
--- a/files/zh-cn/web/css/_doublecolon_cue/index.html
+++ b/files/zh-cn/web/css/_doublecolon_cue/index.html
@@ -9,9 +9,9 @@
---
{{CSSRef}}
-:: cue CSS伪元素匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。
+::cue CSS伪元素匹配所选元素中的WebVTT提示。这可以用于在 VTT 轨道的媒体中使用字幕和其他线索。
-只有CSS一小部分属性可以与 :: cue 伪元素一起使用：
+只有 CSS 一小部分属性可以与 ::cue 伪元素一起使用：
{{cssxref("color")}}语法
示例
-以下CSS设置提示样式，使文本为白色，背景为半透明黑盒。
+以下 CSS 设置提示样式，使文本为白色，背景为半透明黑盒。
::cue {
diff --git a/files/zh-cn/web/css/_doublecolon_first-letter/index.html b/files/zh-cn/web/css/_doublecolon_first-letter/index.html
index bf08086b648c3a..b92b85157653d3 100644
--- a/files/zh-cn/web/css/_doublecolon_first-letter/index.html
+++ b/files/zh-cn/web/css/_doublecolon_first-letter/index.html
@@ -5,24 +5,24 @@
---
{{ CSSRef() }}
-CSS 伪元素 ::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格） 。
+CSS 伪元素 ::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
/* Selects the first letter of a <p> */
p::first-letter {
font-size: 130%;
}
-元素首字符并不总是很容易识别:
+元素首字符并不总是很容易识别：
- - 首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号（Punctuation）包括在开（Ps），闭（Pe），初始引用（Pi），结束引用（Pf）当中定义的任何Unicode字符以及其他种类的标点符号（Po）。
- - 另外还会有一些以大写双字母组合命名的语言, 比如荷兰的
IJ . 在这种罕见情况下, 两个大写字母都理应被 ::first-letter 伪元素匹配到. (但是浏览器对此支持得很糟糕, 可以用 browser compatibility table进行核实).
- - {{ cssxref("::before") }} 伪元素 和 {{ cssxref("content") }} 属性结合起来有可能会在元素前面注入一些文本。如此，
::first-letter 将会匹配到content文本的首字母。
+ - 首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号（Punctuation）包括在开（Ps），闭（Pe），初始引用（Pi），结束引用（Pf）当中定义的任何 Unicode 字符以及其他种类的标点符号（Po）。
+ - 另外还会有一些以大写双字母组合命名的语言，比如荷兰的
IJ . 在这种罕见情况下，两个大写字母都理应被 ::first-letter 伪元素匹配到. (但是浏览器对此支持得很糟糕，可以用 browser compatibility table进行核实).
+ - {{ cssxref("::before") }} 伪元素 和 {{ cssxref("content") }} 属性结合起来有可能会在元素前面注入一些文本。如此，
::first-letter 将会匹配到 content 文本的首字母。
-首行只在 block-container box内部才有意义, 因此 ::first-letter 伪元素 只在{{ cssxref("display") }}属性值为block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用. 其他情况下, ::first-letter 毫无意义.
+首行只在 block-container box内部才有意义，因此 ::first-letter 伪元素 只在{{ cssxref("display") }}属性值为 block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用。其他情况下，::first-letter 毫无意义。
@@ -30,33 +30,33 @@ 允许的属性值
-只有一小部分CSS可以在包含使用了::first-letter 伪元素选择器的CSS规则集声明块内运用:
+只有一小部分 CSS 可以在包含使用了::first-letter 伪元素选择器的 CSS 规则集声明块内运用：
- 所有的字体属性 : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} 以及 {{ Cssxref("font-family") }}.
- 所有的背景属性 : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}以及 {{cssxref("background-blend-mode")}}.
- 所有的外边距属性: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.
- 所有的内边距属性: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.
- - 所有的边框属性: 比如一些简短的边框属性 {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, 还剩下许多冗长的边框属性等等.
- - {{ cssxref("color") }} 属性.
- - {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (使用恰当的话), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }}
注意此刻必须没有浮动) 等属性.
+ - 所有的边框属性：比如一些简短的边框属性 {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, 还剩下许多冗长的边框属性等等。
+ - {{ cssxref("color") }} 属性。
+ - {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (使用恰当的话), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }}
注意此刻必须没有浮动) 等属性。
-当这个列表以后被实现时, 为了保持css不过时.建议你不要在声明块内使用任何其他属性.
+当这个列表以后被实现时， 为了保持 css 不过时。建议你不要在声明块内使用任何其他属性。
-对于 CSS 2, 伪元素采用单冒号前缀语法. 因为伪类也是同样的语法,所以使得两者难以区分. CSS2.1 改变了伪元素的前缀语法可以解决这个问题. 现在伪元素采用双冒号前缀, 并且伪类仍然采用单冒号前缀.
+对于 CSS 2，伪元素采用单冒号前缀语法。因为伪类也是同样的语法，所以使得两者难以区分. CSS2.1 改变了伪元素的前缀语法可以解决这个问题。现在伪元素采用双冒号前缀，并且伪类仍然采用单冒号前缀。
-CSS2伪类单冒号语法已得到广泛支持时, 所有支持双冒号的浏览器同样也支持旧的单冒号语法.
+CSS2 伪类单冒号语法已得到广泛支持时，所有支持双冒号的浏览器同样也支持旧的单冒号语法。
-考虑浏览器兼容性的话, :first-letter 是一个更有效的选择; 否则, ::first-letter 更受欢迎.
+考虑浏览器兼容性的话，:first-letter 是一个更有效的选择; 否则，::first-letter 更受欢迎。
示例
/* 使每段开头的第一个字母变红变大 */
-p::first-letter { /* 使用:first来兼容IE8- */
+p::first-letter { /* 使用:first 来兼容 IE8- */
color: red;
font-size: 130%;
}
@@ -76,7 +76,7 @@ 规范
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}
{{ Spec2('CSS4 Pseudo-Elements')}}
- 允许属性的类型设置, 文本修适和内联布局属性, {{ cssxref("opacity") }} 以及 {{ cssxref("box-shadow") }}.
+ 允许属性的类型设置，文本修适和内联布局属性，{{ cssxref("opacity") }} 以及 {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}
@@ -86,17 +86,17 @@ 规范
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}
{{ Spec2('CSS3 Selectors') }}
- 定义列表项的特殊行为, 或者是语言特定行为 (比如荷兰的Python). 伪元素的双冒号语法已经介绍过了.
+ 定义列表项的特殊行为，或者是语言特定行为 (比如荷兰的 Python). 伪元素的双冒号语法已经介绍过了。
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}
{{ Spec2('CSS2.1') }}
- 没有重大改变, 而且 CSS2 仍然使用单冒号语法.
+ 没有重大改变，而且 CSS2 仍然使用单冒号语法。
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}
{{ Spec2('CSS1') }}
- 使用单冒号语法的初始定义.
+ 使用单冒号语法的初始定义。
@@ -108,5 +108,5 @@ 浏览器兼容性
参见
- - {{cssxref("::first-line")}} 伪元素.
+ - {{cssxref("::first-line")}} 伪元素。
diff --git a/files/zh-cn/web/css/_doublecolon_first-line/index.html b/files/zh-cn/web/css/_doublecolon_first-line/index.html
index 5fa42a874b1146..2b43e8eba96d87 100644
--- a/files/zh-cn/web/css/_doublecolon_first-line/index.html
+++ b/files/zh-cn/web/css/_doublecolon_first-line/index.html
@@ -5,11 +5,11 @@
---
{{ CSSRef() }}
-::first-line CSS pseudo-element （CSS伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
+::first-line CSS pseudo-element （CSS 伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
-和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的html元素。
+和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。
- ::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的.
+ ::first-line 伪元素只能在块容器中，所以，::first-line伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的。
@@ -17,7 +17,7 @@ 允许的属性值
-在一个使用了 ::first-line 伪元素的选择器中，只有很小的一部分css属性能被使用：
+在一个使用了 ::first-line 伪元素的选择器中，只有很小的一部分 css 属性能被使用：
- 所有和字体有关的属性：{{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, and {{Cssxref("font-family")}}
@@ -30,9 +30,9 @@ 允许的属性值
这个列表将来可能会被扩展，但是推荐的是，你不要使用任何上述没有提到的属性。
-在CSS 2中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在CSS 2.1中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。
+在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。
-因为过去的浏览器都实现过CSS 2的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。
+因为过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。
如果需要支持老旧的浏览器，那么:first-line 是唯一的选择，反之，更推荐使用::first-line。
diff --git a/files/zh-cn/web/css/_doublecolon_grammar-error/index.html b/files/zh-cn/web/css/_doublecolon_grammar-error/index.html
index c08b08a808eae4..9d9f508e3ec879 100644
--- a/files/zh-cn/web/css/_doublecolon_grammar-error/index.html
+++ b/files/zh-cn/web/css/_doublecolon_grammar-error/index.html
@@ -5,9 +5,9 @@
---
{{CSSRef}}{{SeeCompatTable}}
-::grammar-error伪元素应用于浏览器标识为语法错误的文本段
+::grammar-error 伪元素应用于浏览器标识为语法错误的文本段
-只有一小部分的css能够应用在::grammar-error的选择器中
+只有一小部分的 css 能够应用在::grammar-error 的选择器中
- {{cssxref("color")}}
diff --git a/files/zh-cn/web/css/_doublecolon_marker/index.html b/files/zh-cn/web/css/_doublecolon_marker/index.html
index 6752752a71a7b4..95db711b83a50a 100644
--- a/files/zh-cn/web/css/_doublecolon_marker/index.html
+++ b/files/zh-cn/web/css/_doublecolon_marker/index.html
@@ -5,7 +5,7 @@
---
{{CSSRef}}
-::marker CSS pseudo-element（CSS伪元素） 选中一个list item的marker box，后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上，例如{{HTMLElement("li")}}和{{HTMLElement("summary")}}。
+::marker CSS pseudo-element（CSS 伪元素）选中一个 list item 的 marker box，后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上，例如{{HTMLElement("li")}}和{{HTMLElement("summary")}}。
::marker {
color: blue;
@@ -14,7 +14,7 @@
允许的属性值
-在将::marker作为选择器的规则中，只能使用某些CSS属性：
+在将::marker作为选择器的规则中，只能使用某些 CSS 属性：
- All font properties（字体属性）
@@ -24,7 +24,7 @@ 允许的属性值
-规范指出，将来可能会支持其他CSS属性。
+规范指出，将来可能会支持其他 CSS 属性。
语法
@@ -87,5 +87,5 @@ 浏览器兼容性
参见
- - 默认拥有marker boxes的HTML元素：{{HTMLElement("ol")}}，{{HTMLElement("li")}}，{{HTMLElement("summary")}}
+ - 默认拥有 marker boxes 的 HTML 元素：{{HTMLElement("ol")}}，{{HTMLElement("li")}}，{{HTMLElement("summary")}}
diff --git a/files/zh-cn/web/css/_doublecolon_part/index.html b/files/zh-cn/web/css/_doublecolon_part/index.html
index 459285138673ea..2d21e3fb85bd9e 100644
--- a/files/zh-cn/web/css/_doublecolon_part/index.html
+++ b/files/zh-cn/web/css/_doublecolon_part/index.html
@@ -106,7 +106,7 @@ 规范
{{SpecName("CSS Shadow Parts", "#part", "::part")}}
{{Spec2("CSS Shadow Parts")}}
- 初始定义.
+ 初始定义。
diff --git a/files/zh-cn/web/css/_doublecolon_placeholder/index.html b/files/zh-cn/web/css/_doublecolon_placeholder/index.html
index a7d4673d15728a..a01629b73aea4b 100644
--- a/files/zh-cn/web/css/_doublecolon_placeholder/index.html
+++ b/files/zh-cn/web/css/_doublecolon_placeholder/index.html
@@ -12,7 +12,7 @@
font-size: 1.5em;
}
-在使用了::placeholder伪元素的选择器中，仅有小一部分CSS属性可以使用，这个集合可以参考{{cssxref("::first-line")}}伪元素。
+在使用了::placeholder伪元素的选择器中，仅有小一部分 CSS 属性可以使用，这个集合可以参考{{cssxref("::first-line")}}伪元素。
语法
diff --git a/files/zh-cn/web/css/_doublecolon_selection/index.html b/files/zh-cn/web/css/_doublecolon_selection/index.html
index ca1232e10d5fc3..613d1a3e4ea53d 100644
--- a/files/zh-cn/web/css/_doublecolon_selection/index.html
+++ b/files/zh-cn/web/css/_doublecolon_selection/index.html
@@ -8,7 +8,7 @@
---
{{ CSSRef() }}
-::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
+::selection CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
::selection {
background-color: cyan;
@@ -17,7 +17,7 @@
允许属性
-只有一小部分CSS属性可以用于::selection 选择器：
+只有一小部分 CSS 属性可以用于::selection 选择器：
- {{CSSxRef("color")}}
@@ -97,7 +97,7 @@ 规范
-::selection CSS伪元素选择器是CSS第3级选择器的草案，但是在被推荐使用前就被废弃。它现在在第4级伪元素选择器草案中。
+::selection CSS 伪元素选择器是 CSS 第 3 级选择器的草案，但是在被推荐使用前就被废弃。它现在在第 4 级伪元素选择器草案中。
浏览器兼容性
diff --git a/files/zh-cn/web/css/_doublecolon_slotted/index.html b/files/zh-cn/web/css/_doublecolon_slotted/index.html
index 2d17824ef3a2db..6d718470f95d1a 100644
--- a/files/zh-cn/web/css/_doublecolon_slotted/index.html
+++ b/files/zh-cn/web/css/_doublecolon_slotted/index.html
@@ -5,9 +5,9 @@
---
{{ CSSRef }}
-:slotted() CSS 伪元素 用于选定那些被放在 HTML模板 中的元素 (更多请查看 使用模板和插槽).
+:slotted() CSS 伪元素 用于选定那些被放在 HTML 模板中的元素 (更多请查看 使用模板和插槽)。
-这个伪类选择器仅仅适用于 影子节点树(Shadow Dom). 并且只会选择实际的元素节点， 而不包括文本节点.
+这个伪类选择器仅仅适用于 影子节点树 (Shadow Dom)。并且只会选择实际的元素节点， 而不包括文本节点。
/* Selects any element placed inside a slot */
::slotted(*) {
@@ -26,9 +26,9 @@ 语法
样例
-下面的小片段是关于 插槽伪类元素 小demo (点击查看实例).
+下面的小片段是关于 插槽伪类元素 小 demo (点击查看实例).
-在这个小demo 中, 我们使用一个带有3个插槽的HTML模板:
+在这个小 demo 中，我们使用一个带有 3 个插槽的 HTML 模板：
<template id="person-template">
<div>
@@ -41,7 +41,7 @@ 样例
</div>
</template>
-自定义元素 <person-details> 的定义如下:
+自定义元素 <person-details> 的定义如下：
customElements.define('person-details',
class extends HTMLElement {
@@ -64,9 +64,9 @@ 样例
}
})
-为了更好地区分未被成功填充的插槽和成功填充的插槽, 我们在CSS中选择了所有的插槽元素(::slotted(*)), 并填充了不一样的颜色和字体. 结果也是如此.
+为了更好地区分未被成功填充的插槽和成功填充的插槽, 我们在 CSS 中选择了所有的插槽元素 (::slotted(*)), 并填充了不一样的颜色和字体。结果也是如此。
-元素就像如下被填充了起来:
+元素就像如下被填充了起来：
<person-details>
<p slot="person-name">Dr. Shazaam</p>
diff --git a/files/zh-cn/web/css/_doublecolon_spelling-error/index.html b/files/zh-cn/web/css/_doublecolon_spelling-error/index.html
index fd89014d3927c1..d0812970a6aa0f 100644
--- a/files/zh-cn/web/css/_doublecolon_spelling-error/index.html
+++ b/files/zh-cn/web/css/_doublecolon_spelling-error/index.html
@@ -13,7 +13,7 @@
可用的属性
-只有一小部分CSS属性可用于 ::spelling-error 伪元素选择器：
+只有一小部分 CSS 属性可用于 ::spelling-error 伪元素选择器：
- {{cssxref("color")}}