Question

我有自举标签，我希望改变活动标签的状态，我可以这样轻松地做到这一点

.side-nav-cat .active {
    border: 25px solid #888888;
}

但是我希望根据nth-child设置不同的样式，我试过

.side-nav-cat .active li:nth-child(1) {
    border-left: 25px solid #888888;
}
.side-nav-cat .active li:nth-child(2) {
    border-left: 25px solid #628179;
}

但是这个不起作用，我只是使用CSS有没有办法做到这一点？

Answer 1

您只需将选择器更改为：.side-nav-cat li:nth-child(1).active

此处选择第一个li与active类，您的选择器搜索.active类的子项。

.side-nav-cat li:nth-child(1).active {
    border-left: 25px solid #888888;
}
.side-nav-cat li:nth-child(2).active {
    border-left: 25px solid #628179;
}

<ul class="side-nav-cat">
  <li class="active">1</li>
  <li class="active">2</li>
  <li class="active">3</li>
</ul>

bootstrap活动类nth-child（）

1 个答案: