当使用 jquery 添加/删除类时，Nth-Child / Nth-Of-Type 不能与 CSS 类一起使用？ [复制]答案

【问题标题】：Nth-Child / Nth-Of-Type not working with CSS class when classes are added/removed with jquery? [duplicate]当使用 jquery 添加/删除类时，Nth-Child / Nth-Of-Type 不能与 CSS 类一起使用？ [复制]
【发布时间】：2019-12-07 01:13:12
【问题描述】：

我有一系列的 LI 标签。根据用户过滤 LI 的方式，一些将被删除。我想让 LI 根据可见的内容交替使用背景颜色。

对于可见的，添加了“LI-Shown”类。如果它们被过滤掉，我会删除 LI-Shown 类。

如果我过滤掉，我可能会得到这个 HTML：

<ul id="LI-List">
 <li id="1" class="LI-Shown">Showing</li>
 <li id="2" class="LI-Shown">Showing</li>
 <li id="3" style="display:none">Was Filtered Out</li>
 <li id="4" class="LI-Shown">Showing</li>
</ul>

我的 CSS 看起来像：

.LI-List .LI-Shown:nth-child(even) {
  background-color: gray;
}

当我加载结果时（或者当所有 4 个 LI 都显示 LI 时），交替背景工作。但是当它们被过滤到上面的内容时，第 2 LI 和第 4 LI 都是灰色背景。即使我已经从 3rd LI 中删除了 LI-Shown。

它应该做的是：仅显示 LI-Shown 类（ID 1、2 和 4）。只有 ID = 2 应该是灰色的。

我不知道如何让 CSS 将第 4 个 LI 视为第 3 个 LI-Shown 类。 :( 它需要摆脱灰色背景颜色并将其恢复为默认值。

我也尝试过直接使用 jquery 来做到这一点：

$('.LI-List .LI-Shown').filter(":even").css('background', 'gray');

提前感谢您的帮助。

【问题讨论】：

您的代码中的一个错字是，LI-list 是 id ，表明您应该使用 #LI-list 而不是 .LI-list 并且您能否确认 id =3 的 li 是否也有 class= LI - 显示与否？

标签： jquery css css-selectors

【解决方案1】：

在<ul> 你需要class 而不是id <ul id="LI-List">
Nth-Child/Nth-Of-Type 不能与类一起使用。 Nth-Child 使用 DOM 层次结构，Nth-Of-Type 使用标签类型（p、div、span 等）
这里是 jQuery 解决方案：

$('.LI-List .LI-Shown').filter(":even").css('background', 'gray');

.LI-Hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="LI-List">
 <li id="1" class="LI-Shown">Showing</li>
 <li id="2" class="LI-Shown">Showing</li>
 <li id="3" class="LI-Hidden">Was Filtered Out</li>
 <li id="4" class="LI-Shown">Showing</li>
</ul>

【讨论】：