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>

现在我想为没有 class body-page-check-in-item 的头等 checked 添加 css。我试过这样做：

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

但是这会将 css 应用于整个类 body-page-check-in-item 而没有类 checked 而不仅仅是第一个类。

我尝试使用谷歌搜索和更改，例如在 :first-child 之后添加 :first-of-type, not 但这会导致错误 Rule 没有按字母顺序排列所有属性。 .

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

非常感谢您的回答。

Answer 1

您可以使用 adjacent sibling combinator：

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

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

1 个答案: