diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/css/_colon_empty | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/css/_colon_empty')
-rw-r--r-- | files/zh-cn/web/css/_colon_empty/index.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/_colon_empty/index.html b/files/zh-cn/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..a51ec68257 --- /dev/null +++ b/files/zh-cn/web/css/_colon_empty/index.html @@ -0,0 +1,105 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - ':empty' + - CSS + - CSS 骨架效果 + - CSS伪类 + - Layout + - css skeleton + - skelenton + - 参考 + - 布局 + - 网络 +translation_of: 'Web/CSS/:empty' +--- +<div>{{ CSSRef()}}</div> + +<p><code>:empty</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="/zh-CN/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a> 代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格)。注释或处理指令都不会产生影响。</p> + +<pre class="brush: css no-line-numbers">/* Selects any <div> that contains no content */ +div:empty { + background: lime; +}</pre> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">例子</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="box"><!-- I will be lime --></div> +<div class="box">I will be pink</div> +<div class="box"> + <!-- I will be red because of the whitespace around this comment --> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<div class="hidden"> +<pre class="brush: css">body { + display: flex; + justify-content: space-around; +}</pre> +</div> + +<pre class="brush: css">.box { + background: pink; + height: 80px; + width: 80px; +} + +.box:empty { + background: lime; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples', 300, 80)}}</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("css.selectors.empty")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{CSSxRef(":blank")}}</li> +</ul> + +<h3 id="example">example</h3> + +<p><a href="https://codepen.io/xgqfrms/full/zQEJWw">https://codepen.io/xgqfrms/full/zQEJWw</a></p> + +<p> </p> |