Question

查看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。

Answer 1

由于文本节点也是CSS的节点，因此无法使用任何CSS选择器执行此操作。使用JavaScript执行此操作时，您应首先选择只有一个子节点的所有节点，然后测试它是否只是一个文本节点。

Answer 2

使用:empty伪进行操作，例如选择没有子节点的所有元素（包括没有文本节点...... 没有）：

*:empty

Answer 3

我不认为只用CSS就可以做到这一点。您必须遍历所有元素，以测试hasChildNodes()上的错误返回。这将是草率的，而不是我推荐的东西。

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

3 个答案: