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;
}

这针对.e

的所有<div>兄弟姐妹

jsFiddle here

Answer 2

嗯，这个有点疯狂，但只要你只有两个就可以工作：

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

请参阅小提琴：http://jsfiddle.net/wvLaB/

Answer 3

希望这适合你。

演示：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 4

不可能。

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

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

.e ~ .f表示：“。f”，之前有“.e” ，而不是常识中的兄弟姐妹！

.e ~ .f仅选择“f”类，类似于.ul > .li仅选择.li但不选择.ul的方式。你无法扭转方向。

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

css中的兄弟选择器

5 个答案: