有沒有CSS模擬CSS4的空白選擇器？

Question

如果你想選擇沒有任何孩子的節點，你可能會考慮使用:empty。同時，:empty的行爲是非常煩人的，因爲任何空格都會使該規則不適用。 :blank選擇器在這裏作爲救星，但沒有瀏覽器實現它。

你知道有沒有其他元素選擇元素的技巧嗎？

只是爲了激發你的想象力：你如何看待像.parent:not(:scope > *)

Answer 1

選擇器不匹配文本節點，所以沒有辦法模仿要麼:blank，或:empty使用選擇。

從字面上看，.parent:not(:scope > *)表示任何.parent元素，不是:scope元素的子元素，無論該作用域根目錄是什麼。如果選擇器沒有作用域，那麼它相當於.parent:not(:root > *)，或者如果它出現在作用域樣式表中，通常意味着任何這樣的元素不是表示該作用域樣式表的style元素的兄弟元素。

我懷疑你的意思是這樣.parent:not(:has(> *))，這將匹配沒有元素孩子.parent元素，但它不會爲我同樣的理由考慮到他們的文本內容，再次。

好消息是，雖然您仍然需要等待供應商才能實施此新功能，而不是在單獨的:blank僞文件中實施它們，但他們正在考慮修改:empty的功能，噸打破太多的網站。見this answer。

Answer 2

由於BoltClock說是沒有辦法用CSS來實現這一目標只是現在 - 它本來可能與:contains()選擇雖然it was given up from the CSS3 specification。

我知道這是不是你一直在尋找的東西，但在這裏是一個jQuery的解決方案，我有時用：

(function($){ 
    $.isBlank = function(html, obj){ 
     return $.trim(html) === "" || obj.length == 0; 
    }; 

    $('li').each(function() { 
     if($.isBlank(
      $(this).html(), 
      $(this).contents().filter(function() { 
       return (this.nodeType !== Node.COMMENT_NODE); 
      }) 
     )) { 
      $(this).addClass('empty'); 
     } 
    }); 
})(jQuery); 

見jsfiddle demo。它定位任何只包含空格的節點或註釋，但忽略帶有子節點的元素。可能不完美，但迄今爲止，它對我來說相當有效。