加价:
<li class="divider"></li>
<li class="active"><a href="#">Home</a>
<li class="divider"></li>
<li><a href="#">Blog</a></li>
如何仅在.active
是下一个兄弟时才向第一个.divider
添加样式?
我考虑的是.divider + .active
,但这会将样式应用于.active
。
.divider {
border-left: 1px solid #d0d0d0;
}
.active {
background: #fff;
}
// when the next sibling is .active, border-color: transparent;
5条答案
按热度按时间mspsb9vt1#
到目前为止,您不能选择CSS中的前一个元素,您可以做的是通过提供一些不同的类来手动定位类,例如
而不是简单地使用
否则,如果它是
li
的第一个子对象你可以使用
ul.class_name li:first-child
,如果不是,简单地使用nth-of-type(n)
,用你的li
的第n个数字代替n
,这样你就不需要调用类了。例如
上面的选择器将选择具有指定类名的
ul
元素的2nd
子元素。还不满意CSS吗?你可以选择JS/jQuery解决方案,但是如果标记是静态的,我建议你使用
nth
,如果你可以访问标记,你至少可以在你想要样式的元素上调用class。注意:不能将
li
标记嵌套为li
的直接子项,请考虑将标记更改为以下。w46czmvw2#
这 * 可能 * 适合您:
Fiddle
iezvtpos3#
到目前为止,CSS还没有对此提供直接支持,但是jQuery使其相对轻松,假设这是您的项目的一个需求,那么很可能是一条可行之路。
在jQuery中,它可以写成这样:
klsxnrf14#
这是一个Fiddle
中央支助组
jQuery软件
wfypjpf45#
我不知道您的导航树的设计,但我遇到了类似的问题,并决定以下一个兄弟节点为目标,如下所示: