Question

在此HTML结构中：

＆＃13;

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

＆＃13;

我想在element之后C获取color: red;，所以我希望D这封信为red。

这可能吗？

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>

在Sibiling文本之后的第一个元素的选择器？

1 个答案: