Preamble: 这个问题在Spree和jQuery-select2库的上下文中，但是对于那些不熟悉这些库的人来说它应该是可以回答的，因为它主要与CSS样式有关 .
General problem statement: 我有一个包含两个选择框的页面，正在使用jQuery-select2创建和处理 . 第一个是简单的平面列表 . 然而，第二个是分组列表 . Spree应用的交替颜色样式在第二个列表中被破坏，因为select2创建了子列表以及应用于它的样式，来自Spree .
Problem Details:
select2为简单的平面列表创建的选择框的结构如下所示：
<ul class="select2-results">
<li class="some-other-classes">List item 1</li>
... other list items
</ul>
Spree将样式应用于类 select2-results 和列表元素 . 具体来说，交替列表颜色样式是：
.select2-results li:nth-child(odd) {
background: #efefef;
}
对于分组列表，select2会创建以下结构：
<ul class="select2-results">
<li class="many-classes">
<div>Label for group list #1</div>
<ul class="select2-result-sub">
<li class="many-sub-list-classes">
<div class="select2-result-label">List item for group #1</div>
</li>
</ul>
</li>
... other list items
</ul>
注意：我已经省略了应用于这些元素的大多数类，因为我担心它会使示例不可读 . 如果有人希望我在这里添加它们，请告诉我 . 除此之外，它们在jFiddle示例中正确表示（链接如下） .
问题是 nth-child(odd) 样式正在应用于内部和外部 li 元素 . 结果，我最终得到一个纯色的列表组，如下所示：
第二个列表正确显示（因为，当然， nth-child(odd) 未应用于偶数列表项目 .
这些列表的样式来自Spree框架中的here .
This is a jFiddle包含表示此确切方案的示例 . 您可以看到我所描述的样式受影响的方式 .
正如我在顶部所说，这与样式/ CSS问题更相关，因为我可能会省略/覆盖Spree样式 . 最终，我对如何解决这个问题感到茫然 . 用简单的英语，我觉得我希望CSS表达“应用这种风格，除非 <li> 有一个孩子 <ul> ”，或类似的东西 . 但是，据我所知，它是not possible .
The Question: 如何应用交替列表项样式，以便平面列表和带有子列表的分组列表都能正确设置样式，而不会覆盖另一个？
1 回答
您在
li上省略的select2类允许您还原背景 .因此，在您的nth-child之后添加以下内容应该还原那些顶级
li标记的背景颜色：