css - css中的兄弟选择器

Question

我需要将 css 应用于兄弟元素

例子

<div>
    <div class="e"></div>
    <div class="f"></div>
</div>

我希望他们 E 和 F 是红色的，但前提是他们是兄弟姐妹。

万一像

<div>
    <div class="e"></div>
</div>
<div>
    <div class="f"></div>
</div>

他们不是兄弟姐妹，所以他们会有不同的颜色。

没有js。

Answer 1

使用兄弟选择器：

.e ~ div {
    background-color:red;
}

这针对<div>.e 的所有兄弟姐妹

jsFiddle在这里

Answer 2

希望这对你有用。

演示：http: //jsfiddle.net/creativevilla/ae2nf/

HTML：

<div>
    <div class="e">e</div>
    <div class="f">f</div>
</div>

<div>
    <div class="e">e</div>
</div>
<div>
    <div class="f">f</div>
</div>

CSS：

div > div {
 background-color: cyan;   
}

div > div:only-child {  
   background-color: transparent;
}  

Answer 3

好吧，这个有点疯狂，但只要你只有两个就可以了：

.f:nth-child(2), .e:nth-last-child(2) {
   background-color: #ff0000;
}

见小提琴：http: //jsfiddle.net/wvLaB/

Answer 4

不可能。

有关可能的信息，请查看http://css-tricks.com/child-and-sibling-selectors/。

不幸的是，~-operator 有一个“方向”。.e ~ .f会匹配，但不匹配.f ~ .e。

.e ~ .f意思是：一个“.f”，前面有一个“.e” ，而不是常识中的兄弟！

.e ~ .f只选择类“f”，类似于.ul > .li只选择.li's 但不选择.ul's。而且你不能反转方向。

Answer 5

您应该像这样管理定义类：

html

<div class="sib">
    <div class="e"></div>
    <div class="f"></div>
</div>

<div class="si">
    <div class="e"></div>
</div>
<div class="si">
    <div class="f"></div>
</div>

CSS：

.sib > e, .sib > f{
     /*code in here */
}

如果你的html像这样更容易.sib > div{/*code in here */}

对于第二个 html，您可以这样做

div.si ~ .e, div.si ~ .f