使用 Spree 和 jQuery-Select2 为分组列表项和平面列表项设置样式

Posted 2023-03-06

【中文标题】使用 Spree 和 jQuery-Select2 为分组列表项和平面列表项设置样式

【英文标题】：Styling both grouped and flat list items using Spree and jQuery-Select2

【发布时间】：2014-11-17 00:15:03

【问题描述】：

序言： 这个问题在 Spree 和 jQuery-select2 库的上下文中，但是对于那些不熟悉这些库的人来说应该可以回答，因为它主要与 CSS 样式有关。

一般问题说明：我有一个带有两个选择框的页面，它们是使用 jQuery-select2 创建和处理的。第一个是一个简单的平面列表。然而，第二个是分组列表。 Spree 应用的交替颜色样式在第二个列表中被搞砸了，这是由于 select2 如何创建子列表以及应用到它的样式，来自 Spree。

问题详情：

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。

问题：我如何应用交替列表项样式，以使平面列表和带有子列表的分组列表的样式都正确，而不会覆盖或覆盖另一个？

【问题讨论】：

另外，我意识到我已经写了很多，所以如果有任何不清楚的地方，请告诉我，我会修改它。

【参考方案1】：

您在 li 上省略的 select2 类允许您恢复背景。

select2-result-<b>unselectable</b> select2-result-with-children

因此，在您的第 n 个孩子之后添加以下内容应该会恢复那些顶部 li 标记的背景颜色：

li:nth-child(odd).select2-result-unselectable 
    background-color: #ffffff;