Question

我正在构建一个制表符系统，并且对于每个制表符，一旦使用.acive类激活了一些样式，我可以这样做

.side-nav-cat li:nth-child(2).active:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    left: 100%;
    top: 0;
    border: 25px solid transparent;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-left: 25px solid #628179;
}

我怎么不在每个nth-child

上重复所有相同的代码

所以我尝试了以下代码，因此我只需要为每个border-left: 25px solid color;添加nth-child，我似乎不能让nth-child继承.side-nav-cat li:after .active中的所有样式}

任何想法为什么以及如何解决它？感谢。

.side-nav-cat li:after .active {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    left: 100%;
    top: 0;
    border: 25px solid transparent;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-left: 25px solid #628179;
}

.side-nav-cat li:nth-child(2).active:after {
    border-left: 25px solid red;
}

.side-nav-cat li:nth-child(2).active:after {
    border-left: 25px solid blue;
}

Answer 1

您的第一个选择器正在<li>中查找.active类的元素;而不是寻找<li>类的.active。

以下内容应该有效;

.side-nav-cat li.active:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    left: 100%;
    top: 0;
    border: 25px solid transparent;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-left: 25px solid #628179;
}

.side-nav-cat li:nth-child(2).active:after {
    border-left: 25px solid red;
}

.side-nav-cat li:nth-child(2).active:after {
    border-left: 25px solid blue;
}

bootstrap css active tab继承样式

1 个答案: