如果元素后跟具有相同属性的元素，则设置一些样式

Question

假设

<div myattr='user1'>abcd</div>
<div myattr='user2'>1234</div>
<div myattr='user2'>wxyz</div>
<div myattr='user3'>7890</div>

目前第三个元素的显示必须是none。

我试过了

div[myattr='user2'] ~ div[myattr='user2'] {
    display: none;
}

但此代码仅适用于 myattr 为 user2 的元素，不适用于其他用户/属性值，这会将第三个元素的显示设置为 none 而不是第二个。

我想为下一个元素具有相同属性的每个元素设置一些样式。

我怎样才能做到这一点？

CSS 代码是首选，但 JavaScript 也可以在这里使用。

Answer 1

因为你想返回到前面元素的属性值，我认为你不能用 CSS 来做到这一点。使用 JavaScript:

相当简单

for (const entry of document.querySelectorAll("[data-myattr]")) {
    const next = entry.nextElementSibling;
    if (next.getAttribute("data-myattr") === entry.getAttribute("data-myattr")) {
        entry.classList.add("hidden");
    }
}

实例：

const display = document.getElementById("display");
display.textContent = "Before";
setTimeout(() => {
    for (const entry of document.querySelectorAll("[data-myattr]")) {
        const next = entry.nextElementSibling;
        if (next.getAttribute("data-myattr") === entry.getAttribute("data-myattr")) {
            entry.classList.add("hidden");
        }
    }
    display.textContent = "After";
}, 1000);

.hidden {
    display: none;
}

<div id="display"></div>
<hr>
<div data-myattr='user1'>first user1</div>
<div data-myattr='user2'>first user2</div>
<div data-myattr='user2'>second user2</div>
<div data-myattr='user3'>first user3</div>
<hr>
<div data-myattr='user1'>first user1</div>
<div data-myattr='user2'>first user2</div>
<div data-myattr='user3'>first user3</div>
<div data-myattr='user3'>second user3</div>
<div data-myattr='user3'>third user3</div>
<hr>
<div data-myattr='user1'>first user1</div>
<div data-myattr='user2'>first user2</div>
<div data-myattr='user3'>first user3</div>
<div data-myattr='user2'>second user2 but not in a row</div>
<div data-myattr='user3'>second user3 but not in a row</div>

旁注：我在上面使用 data-myattr 而不是 myattr 因为 custom attributes should always use the data- prefix.

如果元素后跟具有相同属性的元素，则设置一些样式

Set some styles if an element is followed by an element with same attribute

javascript

css

responsive-design