html - 空白或空格的 CSS 选择器

Question

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

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

附言:In JSFiddle

Answer 1

很多人都忽略了这个问题的要点，我在下面的阐述中已经解决了这个问题，但是对于那些只是在寻找答案的人，我在这里复制最后一段:

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.

---

虽然问题描述了一个 <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在选择器级别 3 中:

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

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

鉴于HTML considers inter-element whitespace to be transparent by design ，想要使用 CSS 来定位这些元素而不必诉诸修改 HTML 或生成它的应用程序并不是没有道理的(特别是如果你最终不得不实现和测试一个特殊情况只是为了这样做)。为此，Selectors 4 now redefines :empty包括仅包含空格的元素。这最初是作为一个单独的伪类提出的 :blank但最近被重新连接到 :empty在确定根据原始行为在没有太多站点的情况下这样做是安全的之后。浏览器将需要更新其 :empty 的实现为了符合 Selectors 4。如果您需要支持较旧的浏览器，您将不得不经历标记仅包含空格的元素或在事实之前或之后修剪空格的麻烦。