html - CSS 选择器在 :not selector 的最后一个匹配案例之后将 css 添加到下一个位置

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 而没有类 checked 的最后一场比赛 :not选择器。我试过这样做:

.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 的选择器，用于在最后一个 div 之后的下一个 div 类 checked (即在示例中，它只会将 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...]
}