空或空白的 CSS 选择器 [英] CSS selector for empty or whitespace

问题描述

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

<p></p>

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

<p></p>

我找到了 Firefox 的解决方案，:-moz-only-whitespace:

:empty { width: 300px;高度:15px；背景:蓝色；}:-moz-only-whitespace { 宽度:300px;高度:15px；背景:橙色；}

<p></p><p></p><p>这是第三段.</p>

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

PS:在 JSFiddle

解决方案

很多人错过了这个问题的重点，我在下面的文章中已经解决了这个问题，但是对于那些只是在寻找答案的人，我正在镜像最后一段:

<块引用>

Selectors 4 现在重新定义 :empty 以包含仅包含空格的元素.这最初是作为一个单独的伪类 :blank 提出的，但最近在确定在没有太多站点的情况下这样做是安全的之后，又被重新连接到 :empty原来的行为.浏览器将需要更新它们的 :empty 实现以符合选择器 4.如果您需要支持旧版浏览器，您将不得不经历标记仅包含空格的元素或修剪事实前后的空格.

<小时>

虽然问题描述了一个包含少量常规空格字符的 <p> 元素，这似乎是一个疏忽，但更常见的是看到元素在表单中仅包含空格的标记缩进和空行，如:

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

某些元素，如上面示例中的 <li> 以及 <p>，具有可选的结束标记，这可能会导致 DOM 中出现意外的副作用在存在元素间空白的情况下也进行处理.例如，以下两个 <ul> 元素不会产生等效的节点树，特别是第一个不会在选择器级别 3 中产生 li:empty:

li:empty::before { content: '(empty)';字体样式:斜体；颜色:#999；}

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

鉴于 HTML 认为元素间空白是透明的设计，希望使用 CSS 来定位这些元素，而不必修改 HTML 或生成它的应用程序(特别是如果您最终不得不实现和测试一个特殊情况来这样做)并不是不合理的.为此，Selectors 4 现在重新定义了 :empty 以包含仅包含空格的元素.这最初是作为一个单独的伪类 :blank 提出的，但最近在确定在没有太多站点的情况下这样做是安全的之后，又被重新连接到 :empty原来的行为.浏览器将需要更新它们的 :empty 实现以符合选择器 4.如果您需要支持旧版浏览器，您将不得不经历标记仅包含空格的元素或修剪事实前后的空格.

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?

PS: In JSFiddle

解决方案

Lots of people missing the point of this question, which I've addressed in the following exposition, but for those just looking for the answer, I'm mirroring the last paragraph here:

Selectors 4 now redefines :empty to include elements that contain only whitespace. This was originally proposed as a separate pseudo-class :blank but was recently retconned into :empty after it was determined that it was safe to do so without too many sites depending on the original behavior. Browsers will need to update their implementations of :empty in order to conform to Selectors 4. If you need to support older browsers, you will have to go through the hassle of marking elements containing only whitespace or pruning the whitespace before or after the fact.

---

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 in Selectors level 3:

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). To that end, Selectors 4 now redefines :empty to include elements that contain only whitespace. This was originally proposed as a separate pseudo-class :blank but was recently retconned into :empty after it was determined that it was safe to do so without too many sites depending on the original behavior. Browsers will need to update their implementations of :empty in order to conform to Selectors 4. If you need to support older browsers, you will have to go through the hassle of marking elements containing only whitespace or pruning the whitespace before or after the fact.

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