适用于n-childs但不适用于div

时间:2016-03-03 15:19:40

标签: jquery css

我正在使用nth-child参数将背景放在div中的某些元素上。我正在使用bootstrap,我想在用户位于元素上方时显示工具提示。目前我的css是这样的:

.br-widget a.br-active:nth-child(1),
.br-widget a.br-selected:nth-child(1) {
    background: #FB0A01;
}

.br-widget a.br-active:nth-child(2),
.br-widget a.br-selected:nth-child(2) {
    background: #F94E00;
}

.br-widget a.br-active:nth-child(3),
.br-widget a.br-selected:nth-child(3) {
    background: #F96400;
}

.br-widget a.br-active:nth-child(4),
.br-widget a.br-selected:nth-child(4) {
    background: #FA9B01;
}

.br-widget a.br-active:nth-child(5),
.br-widget a.br-selected:nth-child(5) {
    background: #FAB800;
}

.br-widget a.br-active:nth-child(6),
.br-widget a.br-selected:nth-child(6) {
    background: #F9D100;
}

.br-widget a.br-active:nth-child(7),
.br-widget a.br-selected:nth-child(7) {
    background: #EFE601;
}

.br-widget a.br-active:nth-child(8),
.br-widget a.br-selected:nth-child(8) {
    background: #E7E504;
}

.br-widget a.br-active:nth-child(9),
.br-widget a.br-selected:nth-child(9) {
    background: #C3E60C;
}

.br-widget a.br-active:last-child,
.br-widget a.br-selected:last-child {
    background: #47E21A;
}

我面临的问题是工具提示是在创建它的元素之后创建一个div,因此它会破坏我的css,因为它正在成为初始div(br-widget)的子节点。

如果它是一个div,有没有办法可以丢弃css中的孩子?或者即使那个孩子有一类“工具提示”。喜欢这样的东西:

.br-widget a.br-active:nth-child(9):not(div),
.br-widget a.br-selected:nth-child(9):not(div) {
    background: #C3E60C;
}

1 个答案:

答案 0 :(得分:1)

您可以使用:nth-of-type代替:nth-child。使用:nth-of-type,您只计算该类型的元素,而不是每个孩子。