CSS 没有同级选择器

Question

考虑以下 html：

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

我对一个选择器感兴趣（用于抓取内容，因此我无法修改 html），它将选择所有不具有类 idontwantiwant >。

Answer 1

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

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

.iwant:only-child

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

Answer 2

如果有人仍然需要这个，我找到了这个答案。基于它和：不是伪类，初始要求可以使用类似的方法来完成：

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

这种方法比一般的同级组合器有一个优势：它还向后匹配，意思是这样的：（

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

所以如果你首先有 .idontwant 元素 -> case这将被一般兄弟组合器忽略）

---

说明：

1. div:has(+ .idontwant) 将匹配任何与 idontwant 类具有直接同级的 div
2. div:not (:has(+ .idontwant)) 匹配任何与 idontwant 类没有直接兄弟的 div
3. 剩下要做的就是在没有的div与我们想要的类的 idontwant 类的直接同级。

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

---

编辑（来自评论）：
如果有人需要仅在元素具有特定同级（或没有）时对其进行样式设置，您仍然可以使用 :有伪类来完成它（检查代码片段）：

const toogleHasClassEl = document.getElementById("toogleHasClass")
toogleHasClassEl.onclick = () => toogleHasClassEl.classList.toggle("specificclass")

div:has(.specificclass) .stylethis { 
  background: orange
}
div:not(:has(.specificclass)) .stylethis { 
  background: yellow
}


div:has(.stylethis) .specificclass { 
  background: red
}

<div>
  <div class="stylethis">style this</div>
    <div id="toogleHasClass" class="specificclass">if this has `specificclass` class (click to toggle)</div>
</div>
<hr/>
<div>
  <div class="stylethis">style this different</div>
  <div class="thisdoesnthaveclass">if this doesn't have specific class</div>
</div>
<hr/>
<div>
  <div class="stylethis">style this different (if alone and therefore doesn't have specific sibling)</div>
</div>

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

Answer 5

如果您想要的元素始终是最后一个子元素，这也可能会有所帮助：

div:last-child:not(.idontwant) {

}