CSS 无兄弟选择器答案

【问题标题】：CSS no sibling selectorCSS 无兄弟选择器
【发布时间】：2011-12-13 14:03:26
【问题描述】：

考虑以下 html：

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

我对一个选择器（用于抓取内容，因此我无法修改 html）感兴趣，该选择器将选择所有与 idontwant 类没有同级的 iwant。

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

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

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

.iwant:only-child

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

【讨论】：

这可能是一个解决方案，但我更喜欢更通用的东西，因为可能会有额外的divs。不过想法不错。

【解决方案2】：

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

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

【讨论】：

这是多余的，因为每个类都是互斥的。
@BoltClock 你这是什么意思？ div.iwant ~ div.idontwant 选择器比 div.iwant 更具体。
我没有设置样式，我想为爬虫获取这些元素，我更愿意在一个查询中完成。

【解决方案3】：

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

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

【讨论】：