<p></p>
但我有一个条件,它可能是空的,或者可能包含换行符或空格：
<p> </p>
我找到了一个Firefox的解决方案：-moz-only-whitespace：
:empty { width: 300px; height: 15px; background: blue; }
:-moz-only-whitespace { width: 300px; height: 15px; background: orange; }
<p></p> <p> </p> <p>This is paragraph three.</p>
其他浏览器有类似的解决方案吗？
解决方法
<ul class="items">
<li class="item">
<div>
<!-- Some complex structure of elements -->
</div>
</li>
<li class="item">
</li> <!-- Empty,except for a single line break and
indentation preceding the end tag -->
</ul>
一些元素,如< li>在上述示例以及< p>中,具有可选的结束标签,其可能在DOM处理中以及在元素间空白的存在下引起意外的副作用.例如,以下两个< ul>元素不产生等效的节点树,特别是第一个不会导致li：empty：
li:empty::before { content: '(empty)'; font-style: italic; color: #999; }
<ul> <li> </ul> <ul> <li></li> </ul>
鉴于HTML considers inter-element whitespace to be transparent by design,要使用CSS定位这些元素并不是无理的,而不用诉诸于修改HTML或者生成它的应用程序(特别是如果最终必须实现和测试一个特殊情况).
如上所述,:blank pseudo-class in Selectors 4将解决这个问题.不幸的是,它没有达到目前的标准,因为它没有提前提出,或者根本就没有机会去实现.即使它的名字还没有定稿,还不清楚描述的行为是否经过测试或最终确定.
由于它是一个相对较新的标准提案,因此在-moz-only-whitespace之外没有已知的实现,MDN有this说：
The
:-moz-only-whitespacepseudo-class matches an element that has no child nodes at all or empty text nodes or text nodes that have only white-space in them. Only when there are element nodes or text nodes with one or more characters inside the element,the element doesn’t match this pseudo-class anymore.
…经过仔细检查,似乎符合规范的描述：空白,但由于它是非标准的,没有任何内容尚未确定,我建议不要在生产中使用它.
由于它在其他任何地方没有实现,所以目前在任何其他浏览器中都没有任何等效项.在此期间,修改HTML是唯一的选择,无论是源代码,还是通过使用脚本的DOM操作.
