CSS 选择器在 :not 选择器的最后一个匹配案例后将 css 添加到下一个位置 [英] CSS selector add css to next position after last match case of :not selector

问题描述

这是我的 HTML 代码:

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

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

.body-page-check-in-item:not(.checked) {显示:无；光标:指针；}

但是这将匹配所有 c (1), d (2), g (3), h (4), i (5).我之前问过这个，一个解决方案是改为:

.body-page-check-in-item.checked + :not(.checked) {显示:无；光标:指针；}

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

但是，我需要一个仅应用一次 css 的选择器，用于在具有 checked 类的最后一个 div 之后的下一个 div(即，在示例中，它只会将 css 应用于位置 g (3) 处的类，位置 d (2) 处的类将不会应用 CSS.

我应该改成什么?

非常感谢您的回答.

解决方案

我知道您可能希望完全不用 javascript 来实现这一目标，但一种方法是使用 javascript 来:

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

然后然后您可以使用该类在您的 CSS 中设置样式.

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

//获取所有物品const allItems = [... document.querySelector('.body-page-check-in-item')];//获取检查项目const checkedItems = [... document.querySelector('.body-page-check-in-item.checked')];//获取最后检查的项目const lastCheckedItem = checkedItems[(checkedItems.length - 1)];//获取最后检查项目的索引const indexOfLastCheckedItem = allItems.indexOf(lastCheckedItem);//获取目标物品const targetItem = document.querySelector('.body-page-check-in-item')[(indexOfLastCheckedItem + 1)];//将目标类应用于目标项目targetItem.classList.add('my-target-item');

而且现在您可以在 CSS 中设置 .my-target-item 的样式:

.my-target-item {[...这里的样式...]}

Here is my HTML code:

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

Now I want to add css for class body-page-check-in-item without class checked of last match of :not selector. I have tried doing this:

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

But that will match all c (1), d (2), g (3), h (4), i (5). I asked about this before, one solution is to change to:

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

But that solution will match both d (2) and g (3) and is iterable after that.

However, I need a selector that apply the css only once, for the next div after the last div that has the class checked (i.e. in the example it will only apply css to class at position g (3) and class at position d (2) will not be apply CSS.

What should I change to?

Your answer will be highly appreciated.

解决方案

I recognise that you'll probably want to achieve this entirely without javascript, but one approach would be to use javascript to:

• identify your target-element
• add a class to that target-element

and then you can use that class for styling in your CSS.

For the example you've given, you could deploy the following 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');

And now you can style .my-target-item in your CSS:

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

这篇关于CSS 选择器在 :not 选择器的最后一个匹配案例后将 css 添加到下一个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！