如何仅在下一个元素具有特定类时应用样式？

Question

标记：

<li class="divider"></li>
<li class="active"><a href="#">Home</a>
<li class="divider"></li>
<li><a href="#">Blog</a></li>

仅当

.divider

是下一个同级时，如何在第一个

.active

添加样式？

我正在考虑

.divider + .active

但这会将样式应用于

.active

。

.divider {
  border-left: 1px solid #d0d0d0;
}
.active {
  background: #fff;
}
// when the next sibling is .active, border-color: transparent;

Answer 1

到目前为止，您无法在 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)

，将

n

替换为你的

li

的第n个数字，这样你就不需要调用类了。

例如

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

上面的选择器将选择具有指定类名的

2nd

元素的

ul

子元素。

---

对 CSS 仍然不满意？您可以选择 JS/jQuery 解决方案，但如果标记是静态的，我建议您使用

nth

，如果您有权访问标记，您至少可以在想要设置样式的元素上调用类..

---

注意：您不能将

li

标签作为直接子级嵌套到

li

，请考虑将标记更改为以下 ..

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

Answer 2

CSS 目前还没有对此提供直接支持，但 jQuery 使其相对轻松，并且假设这是您的项目的要求，很可能是可行的方法。

在 jQuery 中，它会写成这样：

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

Answer 3

这可以为你工作：

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>

小提琴

Answer 4

这是一个小提琴

CSS

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

jQuery

$(function() {

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

  //or

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

});

Answer 5

我不知道你的导航树的设计，但我面临着类似的问题，并决定像这样瞄准下一个兄弟姐妹：

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

Answer 6

现在使用

:has

选择器就很容易了。

.divider {
  border: 1px solid gray;
  padding: 12px;
}

.divider:has(+.active) {
  border-color: red;
}

<li class="divider"></li>
<li class="active"><a href="#">Home</a>
<li class="divider"></li>
<li><a href="#">Blog</a></li>