CSS选择器非选择器后的第一个位置

Question

这是我的HTML代码：

<div class="body-page-check-in-list">
...
<div class="body-page-check-in-item checked">
<div class="body-page-check-in-item checked">
<div class="body-page-check-in-item">
<div class="body-page-check-in-item">
...
</div>

现在我想为第一个类body-page-check-in-item添加css，而不添加类checked。我试过这样做：

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

但这将把css应用于整个类body-page-check-in-item，而不应用于类checked，而不仅仅应用于第一个类。

我试着在谷歌上搜索和更改，比如在not之后添加:first-child、:first-of-type，但这会出现错误。规则并没有按字母顺序显示所有属性。

那么，如何将css应用于第一个没有checked的类呢？

非常感谢您的回答。

Answer 1

您可以使用相邻的同级组合子：

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

<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>