我需要将 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。
我需要将 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。
希望这对你有用。
演示: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;
}
好吧,这个有点疯狂,但只要你只有两个就可以了:
.f:nth-child(2), .e:nth-last-child(2) {
background-color: #ff0000;
}
见小提琴:http: //jsfiddle.net/wvLaB/
不可能。
有关可能的信息,请查看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。而且你不能反转方向。
您应该像这样管理定义类:
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