1

我正在开发一个基于最新 Twitter Bootstrap 3 的有点复杂的侧边栏菜单Accordion。菜单中的项目也包含带有项目的子菜单，我想为偶数和奇数元素为项目背景着色。

你可以在这里看到我的例子：http: //jsfiddle.net/dzorz/qZZ3r/

我已经设法用这个 css 部分为偶数和奇数元素 od 手风琴/面板着色：

.panel-default:nth-of-type(odd) .panel-heading{
background: #ffffff !important;
}

.panel-default:nth-of-type(even) .panel-heading{

background: #5bc0de !important;

}

并且在位于first(odd) item（“Dr. Hans von Rosenheim”）内部的 1 级物品和 2 级物品上一切正常，但是位于 1 级内部的 2 级物品second(even) item（“Hans von Rosenheim”）都是用蓝色着色，就像它们都是偶数一样。

现在我的问题是为什么这个css在子菜单的第一种情况下工作得很好，而在子菜单的第二种情况下它的工作方式不同，它怎么能解决？

您可以在上面链接的我的 jsfiddle 中查看并进行编辑。

PS我没有粘贴所有代码，因为它很长，只是css的关键部分。您可以在jsfiddle中一起检查所有代码

4

2 回答 2

4

这是您完成 CSS 的方式。.panel-default:nth-of-type(even) .panel-heading适用于第一级项目及其所有子项目/第二级项目。这是通过为二级项目添加额外 CSS 的快速修复：

.panel-default:nth-of-type(even) .panel-collapse .panel-default:nth-of-type(even) .panel-heading {
  background: #ffffff !important;   
}

示例：http: //jsfiddle.net/qZZ3r/1/

更新：

请参阅@NikhilPatel 的回答以获得更完善的解决方案：

.panel-default:nth-of-type(even) > .panel-heading{
  background: #5bc0de !important;
}
于 2013-09-13T09:35:34.230 回答
1

只需使用>选择器来定位子元素。

.panel-default:nth-of-type(even) > .panel-heading{
    background: #5bc0de !important;
}

小提琴

于 2013-09-13T09:51:01.203 回答