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>

如何使用css选择所有基本元素？

1 个答案: