空或空白的CSS选择器

空或空白的CSS选择器

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

选择器4现在重新定义

:empty

为包括仅包含空格的元素。最初是作为单独的伪类提出的，

:blank

但是最近

:empty

确定在没有太多站点的情况下可以这样做是安全的，这取决于原始行为。

:empty

为了符合选择器4，浏览器将需要更新其实现。如果需要支持较旧的浏览器，则必须经历标记元素仅包含空格的麻烦，或者在事实之前或之后进行修剪。

---

虽然问题描述的

<p>

元素包含少数规则的空格字符，这似乎是一个疏忽，但在标记中元素仅包含空格的缩进和空白行的情况下，这种情况更为普遍，例如：

<ul >  <li >    <div>      <!-- Some complex structure of elements -->    </div>  </li>  <li >  </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。如果需要支持较旧的浏览器，则必须经历标记元素仅包含空格的麻烦，或在事实之前或之后修剪空格。