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 的结构，因此值得一试。但是，如果类名对您来说是个问题，那么可能没有太多解决方案，因为 CSS 中没有

:only-of-class

伪类可以按类进行过滤并忽略其余部分。

Answer 2

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

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中搜索我们想要的类。

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

---

编辑（来自评论）： 如果有人需要仅在具有特定兄弟元素时对元素进行样式化，您仍然可以使用 :has Pseudo-class 来完成它（检查代码片段）：

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


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

<div>
  <div class="stylethis">style this</div>
    <div class="ifthishasclass">if this has class (and this different)</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) {

}