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

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用你的第n个数字替换li,这样你也不需要调用类.

例如

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>