CSS 无兄弟选择器

Question

考虑以下 html：

 <div>
    <div class="iwant" />
    <div class="idontwant" />
</div>
 <div>
    <div class="iwant" />
</div>

我对一个选择器（用于抓取内容，所以我不能修改 html）感兴趣，它会选择所有 iwant 与类 idontwant 没有兄弟姐妹。

原文由 Chris Hasiński 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果有人仍然需要这个，我找到 了这个答案。基于它和 :not pseudo-class ，初始要求可以使用类似的东西来完成：

 div:not(:has(+ .idontwant)) .iwant {
  ...
}

这种方法比一般的兄弟组合器有一个优势：它也向后匹配，意思是这样的：

 <div>
    <div class="idontwant" />
    <div class="iwant" />
</div>

（所以如果你有 .idontwant 元素第一个 -> 一般兄弟组合器将忽略的大小写）

---

解释：

1. div:has(+ .idontwant) 将匹配任何与类 div 有直接兄弟关系的 idontwant
2. div:not(:has(+ .idontwant)) 匹配任何 div 与类 idontwant 没有直接兄弟姐妹
3. 剩下要做的就是在没有类 idontwant 的直接兄弟的 div 中搜索我们想要的类。

选择器非常奇怪而且很大，但可以完成工作，而且我认为在某些（特定的）情况下非常需要。

原文由 Berci 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

没有兄弟选择器可以按类匹配（或不匹配）元素。

我能想到的最接近的选择器是

.iwant:only-child

但是这个选择器意味着除了 --- 之外不能有任何其他元素作为父元素 div class="iwant" 的子 div ，无论类型或类别如何。这可能会满足您的需要，具体取决于您的 HTML 结构，因此值得一试。但是，如果类名对您来说是个问题，那么可能没有太多解决方案，因为 CSS 中没有 :only-of-class 伪类，它按类过滤并忽略其余部分。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议