CSS没有兄弟选择器

Question

考虑以下html:

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

我对一个选择器(用于抓取内容,因此我无法修改html)感兴趣,它将选择所有iwant不具有类的兄弟idontwant.

Answer 1

没有兄弟选择器可以按类匹配元素(或不匹配).

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

.iwant:only-child

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

Answer 2

如果有人仍然需要这个，我找到了这个答案。基于它和:not 伪类，可以使用类似以下内容来完成初始要求：

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. 剩下要做的就是在没有直接同级类的 div 中搜索idontwant我们想要的类。

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

Answer 3

没有负同级 CSS 选择器。使用同级选择器设置新样式，然后在以下位置重置样式.idontwant：

div.iwant {
    /*Set CSS here*/
    display: inline;
}
div.iwant ~ div.idontwant {
    /*Reset CSS*/
    display: block /* Default of DIV is block*/
}

Answer 4

如果没有特定的同级项目，就没有好的方法来定位项目。但您可以用来.iwant:last-child定位没有后续同级的项目。

示例： http: //codepen.io/martinkrulltott/pen/YyGgde