我正在使用第 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 中丢弃一个 child ?或者即使那个 child 有一类“工具提示”。像这样:
.br-widget a.br-active:nth-child(9):not(div),
.br-widget a.br-selected:nth-child(9):not(div) {
background: #C3E60C;
}
最佳答案
您可以使用 :nth-of-type
而不是 :nth-child
。使用 :nth-of-type
您只计算该类型的元素,而不是每个子元素。
关于jquery - 适用于第 n 个 child 但不适用于 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35776067/