html - 给定元素前后元素的 CSS 选择器

Question

我有一段正在解析的生成的 HTML。粗略地说，我对这个问题感兴趣的部分是这样的:

<div class="rowset">
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <br><h2>WOWZA</h2><br>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
</div>

我需要一种方法来在两个单独的操作中选择出现在 WOWZA 之前的 div 和出现在 WOWZA 之后的 div。 WOWZA 之前和之后总是至少有一个 div，并且它们总是具有同一类“head”。 head div 的数量因行集而异。

文字 WOWZA 是不变的，永远不会改变。我只是不知道如何在这种情况下将它用作分隔符？

如有必要，我也可以为此使用 jquery 选择器。

Answer 1

我相信您必须为此使用 jQuery，因为 CSS3 目前无法通过文本内容选择元素。但是，对于 jQuery，我们可以使用 .contains()

---

要选择文本之后的元素:

你可以使用~，General sibling combinator

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

---

要选择文本之前的元素:

我们可以使用 jQuery 的 .not() 从集合中排除 $afterWowza 中的元素

let $afterWowza = $('.rowset h2:contains("WOWZA") ~ .head');
let $beforeWowza = $('.rowset .head').not($afterWowza);

$beforeWowza.css('background-color', 'blue');
$afterWowza.css('background-color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rowset">
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <br><h2 class="wowza">WOWZA</h2><br>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
</div>