小编典典

空或空白的CSS选择器

css

我们有一个选择器:empty,可以在元素 完全为空 时匹配它:

<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>

其他浏览器有类似的解决方案吗?


阅读 683

收藏
2020-05-16

共1个答案

小编典典

很多人错过了这个问题的要点,在下面的博览会中我已经解决了这个问题,但是对于那些只想寻找答案的人,我在这里反映了最后一段:

选择器4现在重新定义
:empty为包括仅包含空格的元素。最初是作为单独的伪类提出的,:blank但是最近:empty确定在没有太多站点的情况下可以这样做是安全的,这取决于原始行为。:empty为了符合选择器4,浏览器将需要更新其实现。如果需要支持较旧的浏览器,则必须经历标记元素仅包含空格的麻烦,或者在事实之前或之后进行修剪。


虽然问题描述的<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: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。如果需要支持较旧的浏览器,则必须经历标记元素仅包含空格的麻烦,或在事实之前或之后修剪空格。

2020-05-16