html - 访问的样式 sibling

Question

我的 HTML 看起来像这样:

<ul>
    <li>
        <a></a>
        <a></a>
        <a></a>...
    </li>
</ul>

我想将样式应用于已访问链接的所有兄弟链接。 我试过:

ul>li>a:visited ~ a{
    color: green !important;
}

什么也没有发生。但是

ul>li>a:first-child ~ a{
    color: green !important;
}

工作得很好。 将样式应用于 <li>访问过的链接也适用于我。

Answer 1

尝试破解上面的内容，这个选择器应该可以工作。在这里，我试图选择嵌套在 li 下的任何 a 的兄弟，后来，我忽略了尚未访问的 a。这应该模拟您正在寻找的效果。

---

同样的预览:

---

ul > li > a ~ a:not(:visited) {
  color: red;
}

<ul>
  <li>
    <a href="https://google.com">Google</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://stackoverflow.com">Stackoverflow</a>
    <a href="https://google.com">Google</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://google.com">Google</a>
    <a href="https://google.com">Google</a>
    <a href="https://google.com">Google</a>
  </li>
</ul>