diff options
author | Peadar <peadar.liu@bytedance.com> | 2021-04-18 14:06:01 +0800 |
---|---|---|
committer | Irvin <irvinfly@gmail.com> | 2021-04-26 09:44:18 +0800 |
commit | d269b228a7d3db2aece5419b4f29253ce04e10f2 (patch) | |
tree | 6a931a467c577d46c3947c50c41c4304398f047e /files/zh-cn/web/css | |
parent | d158359094f596695a43879494450a2a0bcb4315 (diff) | |
download | translated-content-d269b228a7d3db2aece5419b4f29253ce04e10f2.tar.gz translated-content-d269b228a7d3db2aece5419b4f29253ce04e10f2.tar.bz2 translated-content-d269b228a7d3db2aece5419b4f29253ce04e10f2.zip |
为css var()同步的内容同步英文版
Diffstat (limited to 'files/zh-cn/web/css')
-rw-r--r-- | files/zh-cn/web/css/var()/index.html | 17 |
1 files changed, 11 insertions, 6 deletions
diff --git a/files/zh-cn/web/css/var()/index.html b/files/zh-cn/web/css/var()/index.html index 281a7dcf48..f4121fa9b5 100644 --- a/files/zh-cn/web/css/var()/index.html +++ b/files/zh-cn/web/css/var()/index.html @@ -10,7 +10,7 @@ tags: - 实验性的 translation_of: Web/CSS/var() --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +<div>{{CSSRef}}</div> <h2 id="概述">概述</h2> @@ -37,6 +37,8 @@ translation_of: Web/CSS/var() <h2 id="示例">示例</h2> +<h3 id="Using_a_custom_property_set_on_root">在 :root 上定义,然后使用它</h3> + <pre class="brush: css notranslate">:root { --main-bg-color: pink; } @@ -46,21 +48,23 @@ body { } </pre> +<h3 id="Custom_properties_with_fallbacks_for_use_when_the_property_has_not_been_set">当第一个值未定义,回退值生效</h3> + <pre class="brush: css notranslate">/* 后备值 */ -/* 在父元素样式中 */ +/* 在父元素样式中定义一个值 */ .component { --text-color: #080; /* header-color 并没有被设定 */ } -/* 在 component 的样式中: */ +/* 在 component 的样式中使用它: */ +.component .text { + color: var(--text-color, black); /* 此处 color 正常取值 --text-color */ +} .component .header { color: var(--header-color, blue); /* 此处 color 被回退到 blue */ } -.component .text { - color: var(--text-color, black); -} </pre> <h2 id="规范">规范</h2> @@ -89,5 +93,6 @@ body { <h2 id="另请参见">另请参见</h2> <ul> + <li>{{cssxref("env","env(…)")}} – read‑only environment variables controlled by the user‑agent.</li> <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Using CSS variables</a></li> </ul> |