访问的风格兄弟姐妹答案

【问题标题】：Style siblings of visited访问的风格兄弟姐妹
【发布时间】：2019-08-04 14:05:41
【问题描述】：

我的 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> 也适用于我。

【问题讨论】：

你不能，使用 :visited 的样式仅限于某些样式 (developer.mozilla.org/en-US/docs/Web/CSS/…)
这是否意味着您要在访问链接之前和之后定位链接？ ...如果是，那么不是，您不能对位于标记中被访问者之前的兄弟姐妹执行此操作。为此，您需要一个脚本。
使用:visited，以及您可以设置样式的属性的限制，您不能定位链接本身以外的其他元素，因此您的第一个样式不起作用。

标签： html css visited

【解决方案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>

【讨论】：

您的解决方案选择页面上所有未访问的链接（我已经尝试过这个）。只有在同一个列表中有访问过的链接时，我才想要列表中的所有未访问过的链接。
@СергейЯхницкий 抱歉，您的要求让我感到困惑
如果您有多个列表项，那么您的代码会选择所有列表项甚至其他列表中的所有未访问链接。仅当列表项已经有访问过的链接时，我才尝试在列表项中选择未访问过的链接。