mdn · yin1999 · Jul 28, 2024 · Jul 26, 2024 · Jul 28, 2024
@@ -22,7 +22,8 @@ CSS 自定义属性是可以级联的：每一个自定义属性可以多次出
 - `<declaration-value>`
   - : 这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。
 
-> **备注：** 自定义属性名区分大小写——`--my-color` 会被视为与 `--My-color` 不同的自定义属性。
+> [!NOTE]
+> 自定义属性名区分大小写——`--my-color` 会被视为与 `--My-color` 不同的自定义属性。
 
 ## 示例
 

@@ -13,7 +13,8 @@ slug: Web/CSS/-webkit-line-clamp
 
 当应用于锚（anchor）元素时，截断可以发生在文本中间，而不必在末尾。
 
-> **备注：** 该属性最初在 WebKit 中实现的，但存在一些问题。由于需要支持旧版本的浏览器，该属性已在 [CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp) 中被标准化。[CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef-line-clamp) 规范还定义了一个 {{cssxref("line-clamp")}} 属性，用来代替此属性并避免一些问题。
+> [!NOTE]
+> 该属性最初在 WebKit 中实现的，但存在一些问题。由于需要支持旧版本的浏览器，该属性已在 [CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp) 中被标准化。[CSS Overflow Module Level 4](https://drafts.csswg.org/css-overflow-4/#propdef-line-clamp) 规范还定义了一个 {{cssxref("line-clamp")}} 属性，用来代替此属性并避免一些问题。
 
 ## 语法
 

@@ -39,7 +39,8 @@ l10n:
 
 `@document` 目前只在 Firefox 火狐浏览器中支持。如果你想在非 Firefox 火狐浏览器中使用此功能，你可以尝试使用由 @An-Error94 提供的 [polyfill](https://github.com/An-Error94/Handy-Scripts/tree/master/%40document-polyfill)，它使用了用户脚本、[data-\* 属性](/zh-CN/docs/Web/HTML/Global_attributes/data-*)和[属性选择器](/zh-CN/docs/Web/CSS/Attribute_selectors)的组合。
 
-> **备注：** 这个属性还有一个带有 `-moz-` 的前缀版本——`@-moz-document`。在 Firefox 火狐浏览器 59 的 Nightly 和 Beta 版本中，此版本已被限制仅在用户和 UA 样式表中使用——这是一个旨在减轻潜在的 CSS 注入攻击的实验性特性。（请参阅 [Firefox bug 1035091](https://bugzil.la/1035091)）。
+> [!NOTE]
+> 这个属性还有一个带有 `-moz-` 的前缀版本——`@-moz-document`。在 Firefox 火狐浏览器 59 的 Nightly 和 Beta 版本中，此版本已被限制仅在用户和 UA 样式表中使用——这是一个旨在减轻潜在的 CSS 注入攻击的实验性特性。（请参阅 [Firefox bug 1035091](https://bugzil.la/1035091)）。
 
 ## 形式语法
 

@@ -77,7 +77,8 @@ slug: Web/CSS/@font-face
 }
 ```
 
-> **备注：** 接下来的例子在英文原文中已被删除。
+> [!NOTE]
+> 接下来的例子在英文原文中已被删除。
 
 这个例子新定义了一个字体，正常粗细的字采用字体 Times New Roman，粗体字采用 Consolas。
 

@@ -57,9 +57,11 @@ src:
 
   - : 如果用户设备上有字体，则指定字体名称。字体名称可以不加引号。
 
-    > **备注：** 对于 OpenType 和 TrueType 字体，`<font-face-name>` 用于匹配 Postscript 名称或本地可用字体名称表中的完整字体名称。使用哪种类型的名称因平台和字体而异，因此应同时包含这两种名称，以确保跨平台的正确匹配。不得使用指定字体名称的平台替换。
+    > [!NOTE]
+    > 对于 OpenType 和 TrueType 字体，`<font-face-name>` 用于匹配 Postscript 名称或本地可用字体名称表中的完整字体名称。使用哪种类型的名称因平台和字体而异，因此应同时包含这两种名称，以确保跨平台的正确匹配。不得使用指定字体名称的平台替换。
 
-    > **备注：** 本地可用字体可能已经预装在用户的设备上，也可能是用户主动安装的。
+    > [!NOTE]
+    > 本地可用字体可能已经预装在用户的设备上，也可能是用户主动安装的。
     >
     > 对于特定设备的所有用户来说，预装字体集可能是相同的，但用户安装的字体集却不尽相同。因此，通过发现用户安装的字体集，网站可以为设备建立{{glossary("fingerprinting", "指纹")}}，帮助网站在整个网络中跟踪用户。
     >
@@ -76,7 +78,8 @@ src:
 
 如果设置了多个 `src` 描述符，则只应用最后声明的能够加载资源的规则。如果最后一个 `src` 描述符可以加载资源，但不包括 `local()` 字体，即使设备上有可用的字体，浏览器也可能会下载外部字体文件，而忽略本地版本。
 
-> **备注：** 浏览器认为无效的描述符中的值将被忽略。某些浏览器会在任何一项无效时忽略整个描述符，即使只有一项无效。这可能会影响回退的设计。更多信息，请参见[浏览器兼容性](#浏览器兼容性)。
+> [!NOTE]
+> 浏览器认为无效的描述符中的值将被忽略。某些浏览器会在任何一项无效时忽略整个描述符，即使只有一项无效。这可能会影响回退的设计。更多信息，请参见[浏览器兼容性](#浏览器兼容性)。
 
 与 CSS 中的其他 URL 一样，URL 也可以是相对的，在这种情况下，URL 会相对于包含 `@font-face` 规则的样式表的位置进行解析。对于 SVG 字体，URL 指向的是包含 SVG 字体定义的文档中的一个元素。如果省略了元素引用，则隐含了对第一个定义字体的引用。同样，可包含多种字体的字体容器格式只加载给定 `@font-face` 规则中的一种字体。片段标识符用于指示加载哪种字体。如果容器格式缺乏已定义的片段标识符方案，则使用简单的从 1 开始的索引方案（例如，“font-collection#1”表示第一种字体，“font-collection#2”表示第二种字体，等等）。
 

@@ -51,7 +51,8 @@ slug: Web/CSS/@layer
 
 即使 `utilities` 层中规则的 _优先级低于_ `theme` 层中的，该规则仍会被应用。一旦级联层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建 CSS 选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的级联层中。
 
-> **备注：** 在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加 CSS 规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。
+> [!NOTE]
+> 在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加 CSS 规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。
 
 其他不属于任何一级联层的样式将被集中到同一匿名层，并置于所有层的后部，这意味着任何在层外声明的样式都会覆盖在层内声明的样式。
 

@@ -7,7 +7,8 @@ slug: Web/CSS/@media/any-pointer
 
 **`any-pointer`** [CSS](/zh-CN/docs/CSS) [媒体特性](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries#Media_features) 测试用户是否拥有*任意*定点装置（如鼠标）。以及如果存在定点装置，它的精确度是什么样的。
 
-> **备注：** 如果你想测试*主*定点设备的精确度，使用 [`pointer`](/zh-CN/docs/Web/CSS/@media/pointer) 。
+> [!NOTE]
+> 如果你想测试*主*定点设备的精确度，使用 [`pointer`](/zh-CN/docs/Web/CSS/@media/pointer) 。
 
 ## 语法
 
@@ -20,7 +21,8 @@ slug: Web/CSS/@media/any-pointer
 - `fine`
   - : 至少有一个输入途径包含一个精确的定点装置。
 
-> **备注：** 当输入设备拥有不同特性时，可能有多于一个的值被匹配。`none` 仅当它们都不是定点设备时被匹配。
+> [!NOTE]
+> 当输入设备拥有不同特性时，可能有多于一个的值被匹配。`none` 仅当它们都不是定点设备时被匹配。
 
 ## 示例
 

@@ -7,7 +7,8 @@ slug: Web/CSS/@media
 
 **`@media`** [CSS](/zh-CN/docs/Web/CSS) [at 规则](/zh-CN/docs/Web/CSS/At-rule)可用于基于一个或多个[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。
 
-> **备注：** 在 JavaScript 中，可以使用 {{domxref("CSSMediaRule")}} CSS 对象模型接口访问使用 `@media` 创建的规则。
+> [!NOTE]
+> 在 JavaScript 中，可以使用 {{domxref("CSSMediaRule")}} CSS 对象模型接口访问使用 `@media` 创建的规则。
 
 {{EmbedInteractiveExample("pages/tabbed/at-rule-media.html", "tabbed-standard")}}
 
@@ -48,7 +49,8 @@ _媒体类型_（media type）描述设备的一般类别。除非使用 `not`
 - `screen`
   - : 主要用于屏幕。
 
-> **备注：** CSS2.1 和[媒体查询第 3 版](https://drafts.csswg.org/mediaqueries-3/#background)定义了一些额外的媒体类型（`tty`、`tv`、`projection`、`handheld`、`braille`、`embossed` 以及 `aural`），但是它们在[媒体查询第 4 版](https://drafts.csswg.org/mediaqueries/#media-types)中已被弃用，不应继续使用。
+> [!NOTE]
+> CSS2.1 和[媒体查询第 3 版](https://drafts.csswg.org/mediaqueries-3/#background)定义了一些额外的媒体类型（`tty`、`tv`、`projection`、`handheld`、`braille`、`embossed` 以及 `aural`），但是它们在[媒体查询第 4 版](https://drafts.csswg.org/mediaqueries/#media-types)中已被弃用，不应继续使用。
 
 ## 媒体特性
 
@@ -123,7 +125,8 @@ _逻辑运算符_（logical operator）`not`、`and`、`only` 和 `or` 可用于
 
   - : 用于否定媒体查询，如果不满足这个条件则返回 `true`，否则返回 `false`。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 `not` 运算符，则*还必须*指定媒体类型。
 
-    > **备注：** 在第 3 版中，`not` 关键字不能用于否定单个媒体特性表达式，而只能用于否定整个媒体查询。
+    > [!NOTE]
+    > 在第 3 版中，`not` 关键字不能用于否定单个媒体特性表达式，而只能用于否定整个媒体查询。
 
 - `only`
   - : 仅在整个查询匹配时才应用样式。这对于防止较老的浏览器应用所选样式很有用。当不使用 `only` 时，较老的浏览器会将 `screen and (max-width: 500px)` 简单地解释为 `screen`，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 `only` 运算符，则*还必须*指定媒体类型。

@@ -7,7 +7,8 @@ slug: Web/CSS/@media/orientation
 
 [CSS](/zh-CN/docs/Web/CSS) [媒体属性](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries#Media_features)**屏幕方向**（**`orientation`**）可用于测试视口 {{glossary("viewport")}}（或者对于[分页媒体](/zh-CN/docs/Web/CSS/CSS_paged_media)而言的页面框盒）的横纵方向。
 
-> **备注：** 此属性不等价于*设备*的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。
+> [!NOTE]
+> 此属性不等价于*设备*的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。
 
 ## 语法
 

@@ -16,7 +16,8 @@ slug: Web/CSS/@media/prefers-color-scheme
 - `dark`
   - : 表示用户已告知系统他们选择使用暗色主题的界面。
 
-> **备注：** “未得知”、“已告知”等用语，英文原文如此。
+> [!NOTE]
+> “未得知”、“已告知”等用语，英文原文如此。
 > “未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。
 > “已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。
 >

@@ -17,7 +17,8 @@ slug: Web/CSS/@namespace
 
 在 [HTML5](/zh-CN/docs/Glossary/HTML5) 中，已知的 [foreign elements](https://html.spec.whatwg.org/#foreign-elements)(“外语元素，比如 SVG 和 math 命名空间中的元素”) 将被自动加上命名空间。这意味着即使文档中没有任何 xmlns 属性，HTML 元素也将表现的如同他们在 XHTML 命名空间内 (`http://www.w3.org/1999/xhtml`) 一样，而 [\<svg>](/zh-CN/docs/Web/SVG/Element/svg) 和 [\<math>](/zh-CN/docs/Web/MathML/Element/math) 元素则将被加上对应的命名空间 (`http://www.w3.org/2000/svg` 和`http://www.w3.org/1998/Math/MathML`).
 
-> **备注：** 在 XML 中，除非前缀直接定义在了一个属性上（例如：xlink:href），这个属性就不会有命名空间。换句话说，属性将不会继承其所在元素的命名空间，为了符合这个行为，CSS 中的默认命名空间不会加到属性选择器中
+> [!NOTE]
+> 在 XML 中，除非前缀直接定义在了一个属性上（例如：xlink:href），这个属性就不会有命名空间。换句话说，属性将不会继承其所在元素的命名空间，为了符合这个行为，CSS 中的默认命名空间不会加到属性选择器中
 
 ## 语法
 

@@ -133,7 +133,8 @@ l10n:
 
 @page 规则定义了页面盒子的属性。可以通过 CSS 对象模型接口 {{domxref("CSSPageRule")}} 访问 `@page` at 规则。
 
-> **备注：** W3C 正在讨论如何处理和视图窗口有关的 {{cssxref("&lt;length&gt;")}} 的单位：`vh`、`vm`、`vmin` 和 `vmax`。目前，请不要在 `@page` at 规则中使用它们。
+> [!NOTE]
+> W3C 正在讨论如何处理和视图窗口有关的 {{cssxref("&lt;length&gt;")}} 的单位：`vh`、`vm`、`vmin` 和 `vmax`。目前，请不要在 `@page` at 规则中使用它们。
 
 ### 相关属性
 
@@ -160,7 +161,8 @@ l10n:
 
 ## 边距 at 规则
 
-> **警告：** 还没有任何用户代理实现边距 at 规则（截至 2023 年 8 月）。
+> [!WARNING]
+> 还没有任何用户代理实现边距 at 规则（截至 2023 年 8 月）。
 
 边距 at 规则用于 `@page` at 规则内部。它们分别针对文档打印页面的不同部分，根据样式块中设置的属性值对打印页面的区域进行样式设置：
 

@@ -69,7 +69,8 @@ slug: Web/CSS/@supports
 }
 ```
 
-> **备注：** 如果 `not` 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 `and` 和 `or`，则需要外面的圆括号。
+> [!NOTE]
+> 如果 `not` 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 `and` 和 `or`，则需要外面的圆括号。
 
 ### `and` 操作符
 
@@ -116,7 +117,8 @@ slug: Web/CSS/@supports
 }
 ```
 
-> **备注：** 在使用 `and` 和 `or` 操作符时，如果是为了定义多个表达式的执行顺序，则必须使用圆括号。如果不这样做的话，该条件就是无效的，会导致整个 at-rule 失效。
+> [!NOTE]
+> 在使用 `and` 和 `or` 操作符时，如果是为了定义多个表达式的执行顺序，则必须使用圆括号。如果不这样做的话，该条件就是无效的，会导致整个 at-rule 失效。
 
 ### 形式化语法
 

@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-broken
 
 **`:-moz-broken`** [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)是一个 [Mozilla 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)，用于匹配表示损坏图像链接的元素。
 
-> **备注：** 这个选择器主要是为主题开发人员设计。
+> [!NOTE]
+> 这个选择器主要是为主题开发人员设计。
 
 ## 语法
 

@@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-first-node
 
 **`:-moz-first-node`** [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)是一个 [Mozilla 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)，表示任何作为某个其他元素的第一个子节点的元素。它与 {{Cssxref(":first-child")}} 不同，因为它不匹配在其前面有（非空白）文本的第一个子元素。
 
-> **备注：** 在确定 `:-moz-first-node` 时忽略元素开头的任何空白字符。
+> [!NOTE]
+> 在确定 `:-moz-first-node` 时忽略元素开头的任何空白字符。
 
 ## 语法
 

@@ -9,7 +9,8 @@ slug: Web/CSS/:-moz-window-inactive
 
 `:-moz-window-inactive` 也适用于 HTML 文档中的内容。
 
-> **备注：** 在引入这个伪类之前，为背景窗口提供不同的样式是通过在顶层 XUL chrome 窗口上设置属性（`active="true"`）来实现的。这个属性现在已不再使用。
+> [!NOTE]
+> 在引入这个伪类之前，为背景窗口提供不同的样式是通过在顶层 XUL chrome 窗口上设置属性（`active="true"`）来实现的。这个属性现在已不再使用。
 
 ## 语法
 

@@ -18,7 +18,8 @@ a:active {
 
 这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 {{cssxref(":link")}}，{{cssxref(":hover")}} 和 {{cssxref(":visited")}}。为保证样式生效，需要把 `:active` 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 _LVHA 顺序_：`:link` — `:visited` — `:hover` — `:active`。
 
-> **备注：** 在有多键鼠标的系统中，CSS 3 规定 `:active` 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。
+> [!NOTE]
+> 在有多键鼠标的系统中，CSS 3 规定 `:active` 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。
 
 ## 语法
 

@@ -9,7 +9,8 @@ slug: Web/CSS/:autofill
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-autofill.html", "tabbed-shorter")}}
 
-> **备注：** 许多浏览器的用户代理样式表在其 `:-webkit-autofill` 样式声明中使用 `!important`，使它们无法被网页覆盖，除非通过 JavaScript 的方式。例如，Chrome 在其内部样式表中有以下内容：
+> [!NOTE]
+> 许多浏览器的用户代理样式表在其 `:-webkit-autofill` 样式声明中使用 `!important`，使它们无法被网页覆盖，除非通过 JavaScript 的方式。例如，Chrome 在其内部样式表中有以下内容：
 >
 > ```css
 > background-color: rgb(232, 240, 254) !important;

@@ -7,7 +7,8 @@ l10n:
 
 {{CSSRef}}{{SeeCompatTable}}
 
-> **备注：** 使用 `:blank` 选择器被认为尚有一定风险，CSSWG 正在持续改进它。
+> [!NOTE]
+> 使用 `:blank` 选择器被认为尚有一定风险，CSSWG 正在持续改进它。
 >
 > 详见 [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967)。
 

@@ -17,7 +17,8 @@ slug: Web/CSS/:checked
 
 用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。
 
-> **备注：** 因为浏览器经常将 `<option>` 视为[可替换元素](/zh-CN/docs/Web/CSS/Replaced_element)，因此不同的浏览器通过`:checked`伪类渲染出来的效果也不尽相同。
+> [!NOTE]
+> 因为浏览器经常将 `<option>` 视为[可替换元素](/zh-CN/docs/Web/CSS/Replaced_element)，因此不同的浏览器通过`:checked`伪类渲染出来的效果也不尽相同。
 
 ## 语法
 

@@ -9,7 +9,8 @@ slug: Web/CSS/:empty
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-empty.html", "tabbed-shorter")}}
 
-> **备注：** 在[选择器 Level 4](https://drafts.csswg.org/selectors-4/#the-empty-pseudo) 中，`:empty` 伪类被更改为与 {{CSSxRef(":-moz-only-whitespace")}} 类似一样的行为，但目前还没有浏览器支持它。
+> [!NOTE]
+> 在[选择器 Level 4](https://drafts.csswg.org/selectors-4/#the-empty-pseudo) 中，`:empty` 伪类被更改为与 {{CSSxRef(":-moz-only-whitespace")}} 类似一样的行为，但目前还没有浏览器支持它。
 
 ## 语法