CSS选择器将CSS添加到最后一个匹配后的下一个位置，大小写为:not选择器

Question

这是我的HTML代码：

<div class="body-page-check-in-list">
...
<div class="body-page-check-in-item checked">a</div>
<div class="body-page-check-in-item checked">b</div>
<div class="body-page-check-in-item">c</div>            <!-- c (1) -->
<div class="body-page-check-in-item">d</div>            <!-- d (2) -->
<div class="body-page-check-in-item checked">e</div>
<div class="body-page-check-in-item checked">f</div>
<div class="body-page-check-in-item">g</div>            <!-- g (3) -->
<div class="body-page-check-in-item">h</div>            <!-- h (4) -->
<div class="body-page-check-in-item">i</div>            <!-- i (5) -->
...
</div>

现在我想为类body-page-check-in-item添加css，而不添加:not选择器的最后一个匹配的类checked。我试过这样做：

.body-page-check-in-item:not(.checked) {
display: none;
cursor: pointer;
}

但这将匹配所有的c (1)、d (2)、g (3)、h (4)、i (5)。我以前问过这个问题，一个解决方案是改为：

.body-page-check-in-item.checked + :not(.checked) {
display: none;
cursor: pointer;
}

但该解决方案将同时匹配d (2)和g (3)，并且在这之后是可迭代的。

然而，我需要一个选择器，它只应用css一次，用于具有类checked的上一个div之后的下一个div(即，在该示例中，它只将css应用于位置g (3)处的类，而位置d (2)处的类将不应用css。

我应该换什么？

非常感谢您的回答。

Answer 1

我认识到，您可能希望在没有javascript的情况下完全实现这一点，但一种方法是使用javascript：

• 确定目标元素
• 向该目标元素添加一个类

和，然后您可以在CSS中使用该类进行样式设置。

对于您给出的示例，您可以部署以下javascript:~

// GET ALL ITEMS
const allItems = [... document.querySelector('.body-page-check-in-item')];
// GET CHECKED ITEMS
const checkedItems = [... document.querySelector('.body-page-check-in-item.checked')];
// GET LAST CHECKED ITEM
const lastCheckedItem = checkedItems[(checkedItems.length - 1)];
// GET INDEX OF LAST CHECKED ITEM
const indexOfLastCheckedItem = allItems.indexOf(lastCheckedItem);
// GET TARGET ITEM
const targetItem = document.querySelector('.body-page-check-in-item')[(indexOfLastCheckedItem + 1)];
// APPLY TARGET CLASS TO TARGET ITEM
targetItem.classList.add('my-target-item');

现在您可以在CSS中设置.my-target-item样式：

.my-target-item {
[... STYLES HERE...]
}

Answer 2

可能有一个生命破解来动态地针对最后一个选择器.body-page-check-in-item.checked，但我做不到。如果这个html结构是常量(不变(，那么这将是实际的解决方案，使用伪类:nth-last-child()，指定这个选择器的编号。

.body-page-check-in-item.checked:nth-last-child(4) + :not(.checked) {
color: red;
}

<div class="body-page-check-in-list">
<div class="body-page-check-in-item checked">a</div>
<div class="body-page-check-in-item checked">b</div>
<div class="body-page-check-in-item">c</div>
<div class="body-page-check-in-item">d</div>
<div class="body-page-check-in-item checked">e</div>
<div class="body-page-check-in-item checked">f</div>
<div class="body-page-check-in-item">g</div>
<div class="body-page-check-in-item">h</div>
<div class="body-page-check-in-item">i</div>
</div>