diff options
Diffstat (limited to 'files/zh-cn/web/css/unset/index.html')
| -rw-r--r-- | files/zh-cn/web/css/unset/index.html | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/unset/index.html b/files/zh-cn/web/css/unset/index.html new file mode 100644 index 0000000000..3b33d4cf63 --- /dev/null +++ b/files/zh-cn/web/css/unset/index.html @@ -0,0 +1,115 @@ +--- +title: unset +slug: Web/CSS/unset +tags: + - CSS + - 布局 + - 未设置 + - 样式 +translation_of: Web/CSS/unset +--- +<div>{{CSSRef}}</div> + +<p>如果CSS关键字 <strong><code>unset</code></strong> 从其父级继承，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于{{cssxref("inherit")}} ，在第二种情况下（非继承属性）类似于{{cssxref("initial")}}。它可以应用于任何CSS属性，包括CSS简写属性 {{cssxref("all")}} 。</p> + +<h2 id="示例">示例</h2> + +<h3 id="Color">Color</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>This text is red.</p> +<div class="foo"> + <p>This text is also red.</p> +</div> +<div class="bar"> + <p>This text is green (default inherited value).</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.foo { + color: blue; +} +.bar { + color: green; +} + +p { + color: red; +} +.bar p { + color: unset; +} +</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Color') }}</p> + +<h3 id="Border">Border</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>This text has a red border.</p> +<div> + <p>This text has a red border.</p> +</div> +<div class="bar"> + <p>This text has has a black border (initial default, not inherited).</p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">div { + border: 1px solid green; +} + +p { + border: 1px solid red; +} + +.bar p { + border-color: unset; +}</pre> + +<h4 id="结果_2">结果</h4> + +<p>{{ EmbedLiveSample('Border', 'auto', 200) }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">版本</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Cascade', '#inherit-initial', 'unset') }}</td> + <td>{{ Spec2('CSS4 Cascade') }}</td> + <td>与Level 3无变化</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#unset', 'unset') }}</td> + <td>{{ Spec2('CSS3 Cascade') }}</td> + <td>初始规范</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ Compat("css.types.global_keywords.unset")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>使用{{cssxref("initial")}}将属性设置为其初始值。</li> + <li>使用{{cssxref("revert")}}将属性重置为user-agent样式表规定的值（或用户样式，如果存在）。</li> + <li>使用{{cssxref("inherit")}}使元素的属性与其父元素相同。</li> + <li> {{cssxref("all")}}属性允许您一次将所有属性重置为其初始，继承，恢复或未设置状态。</li> +</ul> |