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

这是一个黑客攻击，但可以为你工作：

<div class='third'>third</div>
<div class='second active'>second</div>
<div class='first'>first</div>

div {
    color: black;
    float: right;
}

.active + .first {
    color: pink;
}

Fiddle

Answer 3

CSS目前还没有对此直接支持，但jQuery使其相对轻松，并且假设这是您项目的要求，很可能是最佳选择。

在jQuery中，它会写成这样的东西：

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

Answer 4

这是Fiddle

<强> CSS

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

<强>的jQuery

$(function() {

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

  //or

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

});

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

4 个答案: