CSS选择器为空或空格 [英] CSS selector for empty or whitespace

问题描述

我们有一个选择器：empty 可在完全空白时匹配元素：

 < p>< / p> 
  

但我有一个条件，它可能为空，或者可能包含换行符或空格：

 < p> < / p> 
  

我发现了一个Firefox的解决方案，： - moz-only-whitespace ：

 ：empty {width：300px; height：15px;背景：蓝色; }： -  moz-only-whitespace {width：300px; height：15px;背景：橙色; }  

 < p>< / p& p> < / p>< p>这是第三段。< / p>  

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

解决方案

>< p> 元素包含少量常规空格字符，这看起来像是一个疏忽，它是更常见的看到标记，其中元素只包含空格的缩进和空白行的形式，例如as：

 < ul class =items> 
< li class =item> 
< div> 
<！ - 一些复杂的元素结构 - > 
< / div> 
< / li> 
< li class =item> 
< / li> <！ - 空，除了单个换行符和
缩进之前的结束标记 - > 
< / ul> 
  

一些元素，如< li> 在上面的例子中以及< p> 有可选的结束标记，这在DOM处理中以及在元素间空白的情况下也可能引起非预期的副作用。例如，以下两个< ul> 元素不生成等效节点树，特别是第一个不会导致 li：空：

  li：empty :: before {content：'（empty）'; font-style：italic;颜色：＃999; }  

 < ul& < li>< / ul>< ul> < li>< / li>< / ul>  

鉴于 HTML将元素间空格设计为透明的， / a>，用CSS来定位这样的元素并不是不合理的，而不必求助于修改HTML或生成它的应用程序（特别是如果你最终必须实现并测试一个特殊情况，这样做）。 p>

如上所述， ：blank 伪类在Selectors 4 中会解决这个问题。不幸的是，它没有使它成为当前的标准，或者是因为它没有提前提出，或者根本没有机会出现。甚至它的名字还没有完成，并且不清楚所描述的行为是否已经过测试或最终确定。

由于这是一个相对较新的提案标准，在之外没有已知的实现： - moz-only-whitespace ，其中MDN具有这说：

： - moz-only-whitespace 伪类匹配一个没有子节点的元素或者空文本节点或文本节点，空间。只有在元素中有元素节点或文本节点，并且元素中包含一个或多个字符时，元素才会与此伪类不匹配。

...在仔细检查后，它似乎与规范的：blank 描述一致，但是因为它是非标准的，还没有完成我建议不要在生产中使用它。

由于它没有在任何其他地方实现，目前没有任何其他浏览器的等效。同时，修改HTML 是唯一的选项，无论是在源代码还是通过使用脚本的DOM操作。

We have a selector :empty that can match an element when it is completely empty:

<p></p>

But I have a condition where it might be empty, or it might contain line breaks or blank spaces:

<p>    </p>

I found a solution for 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>

Is there a similar solution for other browsers?

解决方案

While the question depicts a <p> element containing a handful of regular space characters, which seems like an oversight, it is far more common to see markup where elements contain only whitespace in the form of indentation and blank lines, such as:

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

Some elements, like <li> in the above example as well as <p>, have optional end tags, which can cause unintended side effects in DOM processing as well in the presence of inter-element whitespace. For example, the following two <ul> elements don't produce equivalent node trees, in particular the first one does not result in a li:empty:

li:empty::before { content: '(empty)'; font-style: italic; color: #999; }

<ul>
  <li>
</ul>
<ul>
  <li></li>
</ul>

Given that HTML considers inter-element whitespace to be transparent by design, it's not unreasonable to want to target such elements with CSS without having to resort to modifying the HTML or the application generating it (especially if you end up having to implement and test a special case just to do so).

As mentioned, the :blank pseudo-class in Selectors 4 will solve this problem. Unfortunately, it didn't make it into the current standard, either because it wasn't proposed earlier, or there simply hasn't been an opportunity to flesh it out. Even its name hasn't been finalized yet, and it is unclear if the behavior that is described has been tested or finalized.

As it is a relatively new proposal to the standard, there are no known implementations outside of :-moz-only-whitespace, for which MDN has this to say:

The :-moz-only-whitespace pseudo-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.

... which, on closer inspection, does appear to be consistent with the spec's description of :blank, but as it is non-standard and nothing is yet finalized I would advise against using it in production.

As it is not implemented anywhere else, there is currently no equivalent in any other browser. In the meantime, modifying the HTML is the only option, whether at the source, or through DOM manipulation using a script.

这篇关于CSS选择器为空或空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！