Question

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

您可以在此处查看我的示例：http://jsfiddle.net/dzorz/qZZ3r/

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

.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（“Hans von Rosenheim博士”）内部的第1级物品和第2级物品上，一切都很好，但第二级物品位于第一层{ {1}}（“汉斯·冯·罗森海姆”）都是蓝色的，就像它们都是甚至项一样。

现在我的问题是为什么这个css在子菜单的第一种情况下运行良好，而在子菜单的第二种情况下，它不能以相同的方式工作，如何解决？

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

P.S。 我没有粘贴所有代码，因为它很长，只是css的关键部分。您可以在jsfiddle

中一起检查所有代码

Answer 1

这就是你完成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;
}

Answer 2

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

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

Fiddle

CSS和Twitted Bootstrap - 偶数和奇数元素

2 个答案: