给定元素前后元素的 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，并且它们总是具有相同的“头”类。 头部 div 的数量因行集而异。

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

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

Answer 1

我相信您必须为此使用 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>

Answer 2

您可以使用 jQuery 选择器： $("br ~ h2")

或者，将 HTML <span>或<div>包裹在带有 id 的行周围并使用 jQuery 选择器： $("#idname")