gpt4 book ai didi

css - 不同浏览器中的不同行为都没有产生预期的结果

转载 作者:行者123 更新时间:2023-11-28 01:51:26 25 4
gpt4 key购买 nike

我希望当用户在该页面上时,导航栏中的文本显示不同的颜色,以便用户知道他们在哪里。我可以只用一个页面就可以在所有浏览器中使用它,但是当我开始使用子页面时,事情就变得很有趣了。在 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;
}

最佳答案

我不认为 :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 的子标签.如果省略此选项,它将选择所有后代,这将导致您之前遇到的问题。

关于css - 不同浏览器中的不同行为都没有产生预期的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19871349/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com