8

标记：

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

4 回答 4

6

到目前为止，您无法在 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>
于 2013-09-07T19:32:49.163 回答
3

这是一个黑客，但这可能对你有用：

div {
    color: black;
    float: right;
}

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

小提琴

于 2013-09-07T19:35:14.710 回答
1

CSS 目前还没有对此的直接支持，但是 jQuery 使它相对容易，并且假设这是您的项目的要求，很可能是要走的路。

在 jQuery 中，它会这样写：

if element.next().hasClass('active'){
    element.addClass('divider')
于 2013-09-07T19:35:50.053 回答
0

这是一个小提琴

CSS

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

jQuery

$(function() {

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

  //or

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

});
于 2013-09-07T19:45:51.737 回答