如何使用 css 选择所有基本元素？ [复制]

【问题标题】：How to select all fundamental elements using css? [duplicate]如何使用 css 选择所有基本元素？ [复制]
【发布时间】：2017-05-09 03:37:54
【问题描述】：

如果我有如下 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!。

【问题讨论】：

您的问题有点不清楚，但听起来您正在尝试选择任何没有子元素的元素 - 对吗？

标签： html css

【解决方案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>

【讨论】：