我们有一个选择器:empty,可以在元素 完全为空 时匹配它:
:empty
<p></p>
但我有一个条件,其中可能为空,或者可能包含换行符或空格:
<p> </p>
我找到了Firefox的解决方案:-moz-only-whitespace:
:-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>
其他浏览器有类似的解决方案吗?
很多人错过了这个问题的要点,在下面的博览会中我已经解决了这个问题,但是对于那些只想寻找答案的人,我在这里反映了最后一段:
选择器4现在重新定义 :empty为包括仅包含空格的元素。最初是作为单独的伪类提出的,:blank但是最近:empty确定在没有太多站点的情况下可以这样做是安全的,这取决于原始行为。:empty为了符合选择器4,浏览器将需要更新其实现。如果需要支持较旧的浏览器,则必须经历标记元素仅包含空格的麻烦,或者在事实之前或之后进行修剪。
:blank
虽然问题描述的<p>元素包含少数规则的空格字符,这似乎是一个疏忽,但在标记中元素仅包含空格的缩进和空白行的情况下,这种情况更为普遍,例如:
<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在Selectors级别产生a :
<li>
<ul>
li:empty
li:empty::before { content: '(empty)'; font-style: italic; color: #999; } <ul> <li> </ul> <ul> <li></li> </ul>
鉴于HTML认为元素间空格在设计上是透明的,因此使用CSS定位此类元素而不用诉诸于修改HTML或生成它的应用程序(尤其是如果最终必须实现和测试只是这样做)。为此,选择器4现在重新定义 :empty为包括仅包含空格的元素。最初是作为单独的伪类提出的,:blank但是最近:empty确定在没有太多站点的情况下可以这样做是安全的,这取决于原始行为。浏览器将需要更新其实现:empty为了符合选择器4。如果需要支持较旧的浏览器,则必须经历标记元素仅包含空格的麻烦,或在事实之前或之后修剪空格。