Question

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

Answer 1

我认为：访问伪选择器不是你想要的。这会在访问一次之后选择<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。如果省略这一点，它将选择所有后代，这将导致您之前遇到的问题。

不同浏览器中的不同行为，既没有产生所需的结果

1 个答案: