2016-03-03 175 views
0

我正在使用第n个子参数在div中的某些元素上放置背景。我使用bootstrap,并且我想在用户位于元素上方时显示工具提示。目前我的CSS是这样的:适用于第n个孩子,但不适用于div

.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)。

有没有办法可以在css中丢弃一个孩子,如果它的div?或者即使该孩子有一类“工具提示”。像这样的事情:

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

这个问题太频繁。基本上不可能像那样过滤第n个孩子。你不能做*'不是div的子nth'* – musefan

+1

假设你想应用样式的元素都是相同的类型,你可以使用'nnth-of-type()'。 https://developer.mozilla.org/en/docs/Web/CSS/:nth-of-type –

回答

1

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

+0

我没有得到它...如何使用nth-type类型,仅当它的选择元素.. 。并不分开课程。 – user1033882

+0

只是把':nth-​​of-type'而不是':nth-​​child' – drosam

+0

omg ..我现在一直在用这个搔痒我的头2h ....大声笑...我虽然nth型不是会做到这一点....没有尝试:)谢谢你 – user1033882

相关问题