我正在使用第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;
}
這個問題太頻繁。基本上不可能像那樣過濾第n個孩子。你不能做*'不是div的子nth'* – musefan
假設你想應用樣式的元素都是相同的類型,你可以使用'nnth-of-type()'。 https://developer.mozilla.org/en/docs/Web/CSS/:nth-of-type –