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

【问题标题】：Set some styles if an element is followed by an element with same attribute如果元素后跟具有相同属性的元素，则设置一些样式
【发布时间】：2021-11-08 23:41:54
【问题描述】：

假设

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

现在第三个元素的显示必须是无。

我试过了

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

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

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

我怎样才能做到这一点？

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

【问题讨论】：

如果你连续三个怎么办？后两个都隐藏了吗？
如果我有上面示例中的第一个第二个和第三个元素，第二个元素应该没有显示。如果我有第一个第二个和第四个元素，它们都不应该有任何显示
我不明白这如何回答我的问题。如果你有<div myattr="a">1</div><div myattr="a">2</div><div myattr="a">3</div>，你要不要隐藏3个？
对于您的示例，我希望隐藏第一个和第二个元素，但不隐藏第三个
css 能做到这一点吗？

标签： javascript css responsive-design

【解决方案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。

【讨论】：

我原来的答案隐藏了错误的元素。我已更新以隐藏 较早的 一个，而不是较晚的。