Style siblings of visited

问题

I have HTML looking something like this:

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

I want to apply a style to all sibling links of the visited link. I tried:

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

And nothing happens. But

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

works perfectly fine. Applying a style to <li> with a visited link works for me, too.

回答1:

Tried to hack the above a bit, this selector should work. Here, am trying to select the sibling of any a nested under li, and later, I ignore the a which are not visited yet. This should simulate the effect you are looking for.

---

Preview for the same:

---

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>

来源：https://stackoverflow.com/questions/55149634/style-siblings-of-visited