如何使用css選擇所有基本元素？

Question

如果我有HTML象下面這樣：

<div id="root"> 
    <div>ABC</div> 
    <div> 
     333 
     <div>hihihi</div> 
     <ul> 
      <li>A1</li> 
      <li>A2</li> 
      <li>A3</li> 
     </ul> 
     ABN 
    </div> 
    kkk 
    <span>HHHIII</span> 
    <a href="http://www.google.com/">Google!</a> 
</div> 

如何選擇使用CSS的所有基本要素？也就是說，我想選擇沒有他們的孩子的元素了。在上面的例子中，我想選擇元素，其中innerText是ABC，hihihi，A1，A2，A3，HHHIII，Google !.

Answer 1

我不認爲你會有很多成功的CSS。它確實沒有你所要求的功能，至少不是你想要使用它的廣泛方式。如果您僅限於少數元素，則可以實施Duplicate Question中列出的選項。

隨着我提出了一個JS解決方案。 YMMV取決於DOM的大小。

var nodeList = document.querySelectorAll('*'); 
 

 
nodeList.forEach(function (el) { 
 
    if (0 === el.children.length) { 
 
    el.classList.add('highlight'); 
 
    } 
 
});

.highlight { 
 
    background-color: gold; 
 
}

<div id="root"> 
 
    <div>ABC</div> 
 
    <div> 
 
     333 
 
     <div>hihihi</div> 
 
     <ul> 
 
      <li>A1</li> 
 
      <li>A2</li> 
 
      <li>A3</li> 
 
     </ul> 
 
     ABN 
 
    </div> 
 
    kkk 
 
    <span>HHHIII</span> 
 
    <a href="http://www.google.com/">Google!</a> 
 
</div>