给定元素之前和之后的元素的CSS选择器

debugcn 发表于 Dev

动态

我正在解析一段生成的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选择器。

闪亮的

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

要在文本后选择元素：

您可以使用~时，General sibling combinator

通用同级组合器（〜）分隔两个选择器，并且仅在第二个元素紧随第一个元素之后（尽管不一定紧随其后）才与第二个元素匹配，并且两者都是同一父元素的子元素。

要选择文本之前的元素：

我们可以使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。