是否有选择器或解决方法来选择任何没有子元素的元素答案

【问题标题】：Is there a selector or a work around to select any element with no children是否有选择器或解决方法来选择任何没有子元素的元素
【发布时间】：2010-06-09 01:10:52
【问题描述】：

查看 CSS3 规范，我找不到任何方法来选择任何没有子元素的元素。

让我解释一下。

<body>
 <h1>Main Page</h1>
 <div id="main">
  <div class="post">
   <h2>Article 1</h1>
   <p>some text</p>
  </div>
  <div class="post">
   <h2>Article 2</h1>
   <p>some text</p>
  </div>
 </div>
</body>

我正在寻找一种 CSS 语法来选择 h1、两个 h2 和两个 p。一种在任何页面中选择所有没有子元素的元素的方法。有什么建议吗？

对不起，我忘了添加“空”部分，我实际上已经在使用 *:empty 选择器，但它不适用于任何具有 nodeText 作为子级的标签。所以它适用于任何输入、图像、对象，但不适用于 h2、h1 或任何 p。

【问题讨论】：

是否允许变通？
我认为这可以通过 CSS 选择器和 Javascript 的组合来实现，但不能单独使用 CSS。如果您对这样的解决方案感兴趣，我可以写出来（可能使用 jQuery）...

标签： html css css-selectors

【解决方案1】：

因为文本节点也是 CSS 的节点，所以任何 CSS 选择器都无法做到这一点。使用 JavaScript 时，您应该首先选择只有一个子节点的所有节点，然后测试它是否只是一个文本节点。

【讨论】：

【解决方案2】：

使用 :empty 伪来解决问题，例如选择所有没有子元素的元素（包括没有文本节点...nothing）：

*:empty

【讨论】：

【解决方案3】：

我认为这不能单独使用 CSS 来完成。您必须遍历所有元素测试以检查 hasChildNodes() 上的错误返回。这会很草率，不是我推荐的。

【讨论】：