css - 兄弟文本后的第一个元素的选择器？

Question

在这个 HTML 结构中:

<div>
  <span>A</span>
  <span>B</span>
  C
  <span>D</span>
  <span>E</span>
</div>

我想在 C 之后制作 element 以获得 color: red;，所以我想要字母 D 为红色。

这可能吗？

Answer 1

如果 HTML 结构不是静态的，则不能依赖 CSS 来执行此操作，您将需要一些 JS。

这是一个想法，我将文本节点作为目标并将它们包装在具有特定类的范围内，然后您可以使用 CSS 轻松调整样式。

为了简单起见，我使用了 jQuery 来展示这个想法，我们可以只用 JS 来做到这一点

$(".container").contents().filter(function () {
    return this.nodeType === 3 && this.nodeValue.trim() !== "";
}).wrap("<span class='text-node'></span>");

.text-node + * {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span>A</span>
  <span>B</span>
  C
  <span>D</span>
  <span>E</span>
  F
  <span>G</span>
  <span>H</span>
  <span>I</span>
</div>