css 如何在下一个元素有特定类时才应用样式?

w3nuxt5m  于 2023-03-14  发布在  其他
关注(0)|答案(5)|浏览(188)

加价:

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

mspsb9vt1#

到目前为止,您不能选择CSS中的前一个元素,您可以做的是通过提供一些不同的类来手动定位类,例如

<li class="divider target_me"></li>

而不是简单地使用

ul.class_name li.target_me {
   /* Styles goes here */
}

否则,如果它是li的第一个子对象
你可以使用ul.class_name li:first-child,如果不是,简单地使用nth-of-type(n),用你的li的第n个数字代替n,这样你就不需要调用类了。
例如

ul.class_name li:nth-of-type(2) {
   /* Styles here */
}

上面的选择器将选择具有指定类名的ul元素的2nd子元素。
还不满意CSS吗?你可以选择JS/jQuery解决方案,但是如果标记是静态的,我建议你使用nth,如果你可以访问标记,你至少可以在你想要样式的元素上调用class。
注意:不能将li标记嵌套为li的直接子项,请考虑将标记更改为以下。

<ul>
   <li>
       <a href="#">Home</a>
       <ul>
          <li>Sub</li>
       </ul>
   </li>
</ul>
w46czmvw

w46czmvw2#

这 * 可能 * 适合您:

div {
    color: black;
    float: right;
}

.active + div {
    color: pink;
}
<div class='third'>third</div>
<div class='second active'>second</div>
<div class='first'>first</div>

Fiddle

iezvtpos

iezvtpos3#

到目前为止,CSS还没有对此提供直接支持,但是jQuery使其相对轻松,假设这是您的项目的一个需求,那么很可能是一条可行之路。
在jQuery中,它可以写成这样:

if element.next().hasClass('active'){
    element.addClass('divider')
klsxnrf1

klsxnrf14#

这是一个Fiddle

中央支助组

.divactive {
  border-left: 1px solid transparent;
}

jQuery软件

$(function() {

  $('.active').prev('.divider').addClass('divactive');

  //or

  $('.active').prev('.divider').css({ 'border-left': '1px solid transparent' });

});
wfypjpf4

wfypjpf45#

我不知道您的导航树的设计,但我遇到了类似的问题,并决定以下一个兄弟节点为目标,如下所示:

:not(.divider:first-of-type):not(.active + .divider) {
  border-left: 1px solid #d0d0d0;
}

相关问题