是否应完全隐藏元素

Question

在以下来自https://css-tricks.com/almanac/selectors/b/blank/的示例中，为什么即使使用::blank将段落框的display设置为none，段落框仍可见

​

p {
  min-height: 30px;
  width: 250px;
  background-color: lightblue;
}
p:blank {
  display: none;
}
p:-moz-only-whitespace {
  display: none;
}
/* Mozilla-only pseudo-class that works like :blank will */

<div class="blanks">
  <p>This paragraph is not empty or blank.</p>
  <p>
    <!--this is empty and blank -->
  </p>
  <p>

    <!-- this is not empty, because it has whitespace. But it is blank.-->

  </p>
  <p>This paragraph is not empty or blank.</p>
</div>

​

Answer 1

来自您的参考css-tricks ::blankdemo

在撰写本文时，:blank是CSS选择器级别4草案的一部分，任何浏览器都不支持。

但是，由于Mozilla的前缀p:-moz-only-whitespace {display: none;}，codepen 可以在Firefox57.0中运行。

Answer 2

如果你不想使用:blank，也许可以试试:empty？我听说它可以在所有主流浏览器中运行。希望这能有所帮助。