CSS 伪类 :empty-之路教程

语法

:empty {
  css declarations;
}

带有 <p> 标签的 :empty 选择器示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of thee document</title>
    <style>
      p:empty {
        width: 200px;
        height: 30px;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:empty selector example</h2>
    <p>把痛苦停在昨天 把微笑留给明天。</p>
    <p></p>
    <p>把痛苦停在昨天 把微笑留给明天。</p>
  </body>
</html>

带有 <div> 标签的 :empty 选择器示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:empty {
        background-color: #ccc;
        padding: 15px;
        width: 50%;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>:empty selector example</h2>
    <p>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </p>
    <div></div>
    <p>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </p>
  </body>
</html>

CSS 伪类 :empty

CSS :empty 伪类选择没有任何子元素或者文本内容的元素。

::before 和 ::after 伪元素不会影响元素的空性，即使它们存在于元素内部。

如果另一个标签直接跟在 open 标签之后，那么它被认为是空的。

自闭合元素，例如 <hr />、<br /> 和 <img /> 被认为是空的并且将匹配 :empty 选择器。

在 Selectors Level 4 中，:empty 伪类被更改为类似于 :-moz-only-whitespace，但目前任何浏览器都不支持它。

日期：2020-06-02 22:14:28 来源：oir作者：oir

←CSS empty-cells属性

CSS 伪类:enabled→

语法

带有 <p> 标签的 :empty 选择器示例：

带有 <div> 标签的 :empty 选择器示例：

目录