空或空白的CSS选择器

  • Z时代
  • 2024-01-10
  • 分类：问答

我们有一个选择器: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>

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

回答：

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

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

以上是 空或空白的CSS选择器 的全部内容， 来源链接： utcz.com/qa/422789.html

回到顶部