Html CSS和Twitted引导-偶数和奇数元素

我正在开发一个有点复杂的边栏菜单，它基于最新的Twitter Bootstrap 3

Accordion

。菜单中的项目也包含子菜单中的项目，我想为偶数和奇数元素的项目背景添加不同的颜色

您可以在这里看到我的示例：

我已经用这个css部分成功地为accordion/面板的偶数和奇数元素着色：

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

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

background: #5bc0de !important;

}

在第一级物品和第二级物品上，一切都非常有效，这些物品位于

第一级（奇数）物品
（“Hans von Rosenheim博士”），但第二级物品位于第一级
第二级（偶数）物品
（“Hans von Rosenheim”）内都是蓝色的，就像它们都是偶数项目一样

现在我的问题是，为什么css在第一个子菜单中工作良好，而在第二个子菜单中，它的工作方式不同，如何解决

您可以在上面链接的MyJSFIDLE中查看并编辑它

另外，我没有粘贴所有的代码，因为它很长，只是css的关键部分。您可以在
中一起检查所有代码，这是您完成CSS的方式<代码>面板默认值：第n个类型（偶数）。面板标题
适用于第一级项目及其所有子项目/第二级项目。下面是一个快速修复方法，为第二级项目添加额外的CSS：

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

例如：

更新：

有关更精确的解决方案，请参见@NikhilPatel的答案：

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

这就是你做CSS的方式<代码>面板默认值：第n个类型（偶数）。面板标题
适用于第一级项目及其所有子项目/第二级项目。下面是一个快速修复方法，为第二级项目添加额外的CSS：

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

例如：

更新：

有关更精确的解决方案，请参见@NikhilPatel的答案：

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

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

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

只需使用
选择器以子元素为目标

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

这是一个解决方案。更好的解决方案是使用
选择器将直接子对象作为目标：我同意@NikhilPatel，这是一个更完善的解决方案。这是一个解决方案。更好的解决方案是使用
选择器将直接子对象作为目标：我同意@NikhilPatel，这是一个更精确的解决方案。