2

当用户在该页面上时，我希望导航栏中的文本显示不同的颜色，以便用户知道他们在哪里。我只需一个页面就可以让它在所有浏览器中工作，但是当我开始使用子页面时，事情变得很有趣。在 Chrome 中，父页面占位符链接 (active4) 响应，但所有子页面 (active4a-c) 也响应，在 IE 和 Mozilla 中，单个子页面 (active4a) 响应但父页面 (active4) 不响应。这些类的 CSS 位于内部样式表中，因此一旦您离开页面，链接就会恢复为外部样式表中的样式。

  <li class="active4" ><a href="#" >Reviewers</a>
        <ul>
        <li class="active4a"><a href="reviewers.html">Reviewer Information</a></li>
        <li class="active4b" ><a href="#" >How</a></li>
        <li class="active4c"><a href="#" >Future</a></li>
    </ul>
  </li>

.active4 a:visited {
    color:#6206F7;
}
.active4a a:visited {
    color:#6206F7;
}
4

1 回答 1

1

我不认为 :visited 伪选择器是你想要的。这会在<a>标签被访问过一次后选择它。因此，一旦访问者点击链接，它将始终是新颜色。相反，尝试创建一个active只选择<a>子元素的类。这是一些工作代码：

<!doctype html>
<html>
    <head>
        <style>
            a:link {
                color:blue;
            }
            a:visited {
                color:blue;
            }
            .active > a:link {
                color:red;
            }
            .active > a:visited {
                color:red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="active" ><a href="#" >Reviewers</a>
                <ul>
                    <li class="active"><a href="reviewers.html">Reviewer Information</a></li>
                    <li><a href="#" >How</a></li>
                    <li><a href="#" >Future</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>

我要指出的一件事是>介于.active和之间a:link。这仅选择<a>属于.active. 如果您忽略它，它将选择所有后代，这将导致您之前遇到的问题。

于 2013-11-09T04:03:47.763 回答