html - 访问的风格兄弟姐妹

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

试图破解上述内容，这个选择器应该可以工作。在这里，我试图选择任何a嵌套在 下的兄弟li，后来，我忽略了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>