我想能够标记我的一个链接在每一页与一个类活动，并有它的文本变成黑色，以及被下划线。 我正在chrome上运行代码，我已经通过一个实时服务器和本机在chrome上进行了尝试。
我无法从逻辑上理解为什么它不让我这样改变颜色。
null
/* Example CSS */
.nav li a {
margin-left: 0px;
margin-right: 10px;
text-decoration: none;
color: brown;
}
.active {
text-decoration: underline;
}
.active a {
color: black;
}
.nav li:hover {
text-decoration: underline;
}<!-- example.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="estyles.css">
</head>
<body>
<ul class="nav">
<li class="active"><a href="example.html">Example</a> </li>
<li><a href="example1.html">Example1</a></li>
</ul>
</body>null
您可以尝试以下操作:
.active a {
color: black !important;
}
正如我在评论中提到的，选择器的特殊性才是问题所在。 将.ActiveA选择器更改为LI.ActiveA:
null
/* Example CSS */
.nav li a {
margin-left: 0px;
margin-right: 10px;
text-decoration: none;
color: brown;
}
.active {
text-decoration: underline;
}
li.active a {
color: black;
}
.nav li:hover {
text-decoration: underline;
}<ul class="nav">
<li class="active"><a href="example.html">Example</a> </li>
<li><a href="example1.html">Example1</a></li>
</ul>
另一种方法是使用子选择器(>) 使用属性选择器.active>； a[href]
null
.nav li a {
margin-left: 0px;
margin-right: 10px;
text-decoration: none;
color: brown;
}
.active {
text-decoration: underline;
}
.active > a[href] {
color: black;
}
.nav li:hover {
text-decoration: underline;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="estyles.css">
</head>
<body>
<ul class="nav">
<li class="active"><a href="example.html">Example</a> </li>
<li><a href="example1.html">Example1</a></li>
</ul>
</body>