aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css
diff options
context:
space:
mode:
authorPeadar <peadar.liu@bytedance.com>2021-04-18 14:06:01 +0800
committerIrvin <irvinfly@gmail.com>2021-04-26 09:44:18 +0800
commitd269b228a7d3db2aece5419b4f29253ce04e10f2 (patch)
tree6a931a467c577d46c3947c50c41c4304398f047e /files/zh-cn/web/css
parentd158359094f596695a43879494450a2a0bcb4315 (diff)
downloadtranslated-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.html17
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>