[zh-cn] update 'value processing' #27915

jasonren0403 · 2025-07-04T08:19:56Z

Description

Motivation

Additional details

Related issues and pull requests

fixes #26617

github-actions · 2025-07-04T08:22:29Z

Preview URLs

/zh-CN/docs/Web/CSS/CSS_cascade/Value_processing

Flaws (3)

URL: /zh-CN/docs/Web/CSS/CSS_cascade/Value_processing
Title: CSS 属性值处理
Flaw count: 3

macros:
- Macro produces link /zh-CN/docs/Web/CSS/specificity which is a redirect
- Macro produces link /zh-CN/docs/Web/CSS/specificity which is a redirect
- Macro produces link /zh-CN/docs/Web/CSS/specificity which is a redirect

External URLs (2)

URL: /zh-CN/docs/Web/CSS/CSS_cascade/Value_processing
Title: CSS 属性值处理

https://drafts.csswg.org/cssom/ (1 time) (Note! This may be a new URL 👀)
https://www.w3.org/TR/CSS2/changes.html (1 time) (Note! This may be a new URL 👀)

yin1999 · 2025-07-05T05:33:40Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

+
+## 属性值
+
+每个 CSS 属性的值都来自具有最大 {{cssxref("specificity")}} 的声明。如果两个或两个以上具有相同特异性的声明为同一元素提供了不同的属性值，则会应用选择器具有最大算法权重的声明值。


Suggested change

每个 CSS 属性的值都来自具有最大 {{cssxref("specificity")}} 的声明。如果两个或两个以上具有相同特异性的声明为同一元素提供了不同的属性值，则会应用选择器具有最大算法权重的声明值。

每个 CSS 属性的值都来自具有最大 {{cssxref("specificity")}} 的声明。如果两个或两个以上具有相同优先级的声明为同一元素提供了不同的属性值，则会应用选择器具有最大算法权重的声明值。

yin1999 · 2025-07-05T06:11:15Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

+
+某些属性会继承父元素的值，除非明确覆写。当元素上的特定属性没有样式信息时，就会出现[继承](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance)。如果属性被继承，其值将被设置为父元素的[计算值](#计算值)。如果属性没有被继承，其值将被设置为该元素的[初始值](#初始值)。
+
+[级联](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade)决定了当多个相互冲突的样式针对同一元素时该应用哪个值。级联算法定义了用户代理如何组合来自不同来源、作用域和/或层的属性值。当选择器与元素匹配时，即使优先级较低的来源或层的选择器具有更大的 {{cssxref("specificity")}}，也会应用优先级最高的来源的属性[指定值](#指定值)。


Suggested change

[级联](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade)决定了当多个相互冲突的样式针对同一元素时该应用哪个值。级联算法定义了用户代理如何组合来自不同来源、作用域和/或层的属性值。当选择器与元素匹配时，即使优先级较低的来源或层的选择器具有更大的 {{cssxref("specificity")}}，也会应用优先级最高的来源的属性[指定值](#指定值)。

[层叠](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade)决定了当多个相互冲突的样式针对同一元素时该应用哪个值。级联算法定义了用户代理如何组合来自不同来源、作用域和/或层的属性值。当选择器与元素匹配时，即使优先级较低的来源或层的选择器具有更大的 {{cssxref("specificity")}}，也会应用优先级最高的来源的属性[指定值](#指定值)。

yin1999 · 2025-07-05T06:15:04Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

 ## 处理阶段

+作为文档扁平化元素树一部分的所有元素都有声明值、级联值、指定值、计算值、应用值和实际值。对于特定属性，这些值可能相同，也可能不相同。例如，如果大型代码库包含 CSS `p { font-size: 1.25em; }`，而 HTML 包含 `<p>CSS is fun!</p>`，{{cssxref("font-size")}} 值会经过几个阶段，从指定的 `em` 值变为表现的 `px` 值。


Suggested change

作为文档扁平化元素树一部分的所有元素都有声明值、级联值、指定值、计算值、应用值和实际值。对于特定属性，这些值可能相同，也可能不相同。例如，如果大型代码库包含 CSS `p { font-size: 1.25em; }`，而 HTML 包含 `<p>CSS is fun!</p>`，{{cssxref("font-size")}} 值会经过几个阶段，从指定的 `em` 值变为表现的 `px` 值。

作为文档扁平化元素树一部分的所有元素都有声明值、级联值、指定值、计算值、应用值和实际值。对于特定属性，这些值可能相同，也可能不相同。例如，如果大型代码库包含 CSS `p { font-size: 1.25em; }`，而 HTML 包含 `<p>CSS is fun!</p>`，{{cssxref("font-size")}} 值会经过几个阶段，从指定的 `em` 值变为渲染的 `px` 值。

yin1999 · 2025-07-05T06:16:04Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

+- [计算值](#计算值)
+- [应用值](#应用值)
+
+这些值用于决定最终的[表现值](#表现值)。


rendered value 的翻译为啥改成“表现值”了

Suggested change

这些值用于决定最终的[表现值](#表现值)。

这些值用于决定最终的[渲染值](#渲染值)。

yin1999 · 2025-07-05T06:23:47Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

 ### 初始值

 属性的**初始值**（initial value）是其默认值，如其定义表中所列。初始值的使用取决于属性是否被继承：

- 对于[继承属性](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance#继承属性)，初始值只能被用于没有指定值的**根元素**上。
- 对于[非继承属性](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance#非继承属性)，初始值可以被用于**任意**没有指定值的元素上。
+- 对于[继承属性](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance#继承属性)，只要没有提供[指定值](#指定值)，初始值只能被用于没有指定值的**根元素**上。


mdn/content#40217

yin1999 · 2025-07-05T06:32:11Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

- 对于[继承属性](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance#继承属性)，初始值只能被用于没有指定值的**根元素**上。
- 对于[非继承属性](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance#非继承属性)，初始值可以被用于**任意**没有指定值的元素上。
+- 对于[继承属性](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance#继承属性)，只要没有提供[指定值](#指定值)，初始值只能被用于没有指定值的**根元素**上。
+- 对于[非继承属性](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance#非继承属性)，只要没有提供[指定值](#指定值)，初始值可以被用于**任意**没有指定值的元素上。

 你可以使用 {{cssxref("initial")}} 关键字明确指定初始值。



下面的备注，“正式语法”=>“形式语法”

yin1999 · 2025-07-05T06:38:19Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

 ### 应用值

 属性的**应用值**（used value）是在对[计算值](#计算值)进行了所有计算，并根据布局的具体细节（例如，将百分比解析为实际像素值）对其进行细化后的属性值。

-## 渲染值
+每个 CSS 属性都有一个应用值。尺寸（如 {{cssxref("width")}} 或 {{cssxref("line-height")}}）的使用值以像素为单位。速记属性（如 {{cssxref("background")}}）的使用值与其组件属性（如 {{cssxref("background-color")}} 或 {{cssxref("background-size")}}）以及 {{cssxref("position")}} 和 {{cssxref("float")}} 的应用值一致。


Suggested change

每个 CSS 属性都有一个应用值。尺寸（如 {{cssxref("width")}} 或 {{cssxref("line-height")}}）的使用值以像素为单位。速记属性（如 {{cssxref("background")}}）的使用值与其组件属性（如 {{cssxref("background-color")}} 或 {{cssxref("background-size")}}）以及 {{cssxref("position")}} 和 {{cssxref("float")}} 的应用值一致。

每个 CSS 属性都有一个应用值。尺寸（如 {{cssxref("width")}} 或 {{cssxref("line-height")}}）的使用值以像素为单位。简写属性（如 {{cssxref("background")}}）的使用值与其组件属性（如 {{cssxref("background-color")}} 或 {{cssxref("background-size")}}）以及 {{cssxref("position")}} 和 {{cssxref("float")}} 的应用值一致。

yin1999 · 2025-07-05T06:39:53Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

+window.addEventListener("resize", updateAllUsedWidths);
+```
+
+虽然三个指定值 `auto`、`50%` 和 `inherit` 都是关键字和 {{cssxref("percentage")}}} 值，但使用 `window.getComputedStyle(el)[‘width’];` 获取 `width` 时，返回的是[绝对长度](/zh-CN/docs/Web/CSS/length#绝对长度单位) `px` 值：


Suggested change

虽然三个指定值 `auto`、`50%` 和 `inherit` 都是关键字和 {{cssxref("percentage")}}} 值，但使用 `window.getComputedStyle(el)[‘width’];` 获取 `width` 时，返回的是[绝对长度](/zh-CN/docs/Web/CSS/length#绝对长度单位) `px` 值：

虽然三个指定值 `auto`、`50%` 和 `inherit` 都是关键字和 {{cssxref("percentage")}} 值，但使用 `window.getComputedStyle(el)[‘width’];` 获取 `width` 时，返回的是[绝对长度](/zh-CN/docs/Web/CSS/length#绝对长度单位) `px` 值：

yin1999 · 2025-07-05T06:41:32Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

+  const div = document.getElementById(id);
+  const par = div.querySelector(".show-used-width");
+  const wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;


Suggested change

par.textContent = `Used width: ${wid}.`;

par.textContent = `应用宽度：${wid}。`;

yin1999 · 2025-07-05T06:45:24Z

files/zh-cn/web/css/css_cascade/value_processing/index.md

+
+改变窗口尺寸或旋转移动设备以改变尺寸和应用值。
+
+## 表现值


渲染值？

[zh-cn] update 'value processing'

ed2731c

jasonren0403 requested a review from a team as a code owner July 4, 2025 08:19

jasonren0403 requested review from yin1999 and removed request for a team July 4, 2025 08:19

github-actions bot added the l10n-zh Issues related to Chinese content. label Jul 4, 2025

github-project-automation bot added this to MDN translated-content l10n-zh Jul 4, 2025

github-project-automation bot moved this to Review requested in MDN translated-content l10n-zh Jul 4, 2025

yin1999 reviewed Jul 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[zh-cn] update 'value processing' #27915

[zh-cn] update 'value processing' #27915

jasonren0403 commented Jul 4, 2025

Uh oh!

github-actions bot commented Jul 4, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

yin1999 Jul 5, 2025

Uh oh!

Uh oh!


		## 属性值

		每个 CSS 属性的值都来自具有最大 {{cssxref("specificity")}} 的声明。如果两个或两个以上具有相同特异性的声明为同一元素提供了不同的属性值，则会应用选择器具有最大算法权重的声明值。


		某些属性会继承父元素的值，除非明确覆写。当元素上的特定属性没有样式信息时，就会出现[继承](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance)。如果属性被继承，其值将被设置为父元素的[计算值](#计算值)。如果属性没有被继承，其值将被设置为该元素的[初始值](#初始值)。

		[级联](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade)决定了当多个相互冲突的样式针对同一元素时该应用哪个值。级联算法定义了用户代理如何组合来自不同来源、作用域和/或层的属性值。当选择器与元素匹配时，即使优先级较低的来源或层的选择器具有更大的 {{cssxref("specificity")}}，也会应用优先级最高的来源的属性[指定值](#指定值)。

		## 处理阶段

		作为文档扁平化元素树一部分的所有元素都有声明值、级联值、指定值、计算值、应用值和实际值。对于特定属性，这些值可能相同，也可能不相同。例如，如果大型代码库包含 CSS `p { font-size: 1.25em; }`，而 HTML 包含 `<p>CSS is fun!</p>`，{{cssxref("font-size")}} 值会经过几个阶段，从指定的 `em` 值变为表现的 `px` 值。

	这些值用于决定最终的[表现值](#表现值)。
	这些值用于决定最终的[渲染值](#渲染值)。

	每个 CSS 属性都有一个应用值。尺寸（如 {{cssxref("width")}} 或 {{cssxref("line-height")}}）的使用值以像素为单位。速记属性（如 {{cssxref("background")}}）的使用值与其组件属性（如 {{cssxref("background-color")}} 或 {{cssxref("background-size")}}）以及 {{cssxref("position")}} 和 {{cssxref("float")}} 的应用值一致。
	每个 CSS 属性都有一个应用值。尺寸（如 {{cssxref("width")}} 或 {{cssxref("line-height")}}）的使用值以像素为单位。简写属性（如 {{cssxref("background")}}）的使用值与其组件属性（如 {{cssxref("background-color")}} 或 {{cssxref("background-size")}}）以及 {{cssxref("position")}} 和 {{cssxref("float")}} 的应用值一致。

	虽然三个指定值 `auto`、`50%` 和 `inherit` 都是关键字和 {{cssxref("percentage")}}} 值，但使用 `window.getComputedStyle(el)[‘width’];` 获取 `width` 时，返回的是[绝对长度](/zh-CN/docs/Web/CSS/length#绝对长度单位) `px` 值：
	虽然三个指定值 `auto`、`50%` 和 `inherit` 都是关键字和 {{cssxref("percentage")}} 值，但使用 `window.getComputedStyle(el)[‘width’];` 获取 `width` 时，返回的是[绝对长度](/zh-CN/docs/Web/CSS/length#绝对长度单位) `px` 值：

	par.textContent = `Used width: ${wid}.`;
	par.textContent = `应用宽度：${wid}。`;


		改变窗口尺寸或旋转移动设备以改变尺寸和应用值。

		## 表现值

[zh-cn] update 'value processing' #27915

Are you sure you want to change the base?

[zh-cn] update 'value processing' #27915

Conversation

jasonren0403 commented Jul 4, 2025

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

github-actions bot commented Jul 4, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!