来访者的风格同级 [英] Style siblings of visited

问题描述

我的HTML看起来像这样:

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;
}

什么也没发生.但是

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

完全正常.对具有访问链接的< li> 应用样式也适用于我.

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

推荐答案

试图稍微修改一下上面的内容，此选择器应该可以工作.在这里，我试图选择嵌套在 li 下的任何 a 的同级，后来，我忽略了尚未访问的 a .这应该可以模拟您想要的效果.

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.

相同预览:

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>

这篇关于来访者的风格同级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！