参观的样式兄弟姐妹

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>