如果有空格，:empty 不起作用？

Question

尝试找到一个<div>以这样的目标为目标的伪类：

<div class="nav-previous">
                            </div>

我试过了:blank，:empty但都检测不到。难道只是做不到吗？

https://jsfiddle.net/q3o1y74k/3/

Answer 1

正如其他人提到的，这对于 CSS来说是不可能的。不过，您可以检查 JavaScript 是否只有空格。这是一个简单的仅 JS 解决方案，匹配的“空”div 为蓝色，而包含文本的 div 为红色。更新为向空 div 添加一个类，这将允许您使用 CSS 中的empty选择器轻松定位它们。.empty

仅 JS 的“空”比较将如下所示：

if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "")

如果你使用 jQuery 的话会更容易一些：

if( $.trim( $(element).text() ) == "" ){

if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "")

if( $.trim( $(element).text() ) == "" ){

var navs = document.querySelectorAll(".nav-previous");
for( i=0; i < navs.length; i++ ){
  if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") {
    navs[i].style.background = 'blue';
    navs[i].classList.add( 'empty' );
  } else {
    navs[i].style.background = 'red';
  }
}