如何选择没有前导或尾随文本节点的元素？

Question

我尝试使用:only-child伪类,但不幸的是,这似乎没有考虑文本节点:

<style type="text/css">
  div span:only-child {
    color: red;
  }
</style>

<div>
  Test
  <span>This still becomes red :(</span>
</div>

<div>
  <span>This becomes red, as it should!</span>
</div>
<div>
  <span>This does not become red - great!</span>
  <span>This does not become red - great!</span>
</div>

我试图在我无法引入新类的情况下找到一种方法来检测特定元素何时在其容器元素中完全独立.

有没有办法用CSS实现这一目标？

Answer 1

有没有办法用 CSS 来实现这一点？

不幸的是，没有。

CSS 工作组的旧版本“错误”列表中缺少这样一个想法：

没有裸露的文本与元素混合。所有原始文本都应该有一个可寻址、可样式化的元素来包裹它，如有必要，由 CSS 创建。

当前列表

文本节点不是元素，CSS 无法选择（或忽略）不存在的元素。

因此，在页面中合并文本时，最好始终使用文本元素……您永远不知道何时需要对其进行样式设置。