不确定为什么链接是灰色的

Question

.navigation{
	float: right;
	margin-top:23px;
	font-weight:bolder;
}

.navigation ul{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	color: #fff;
}

.navigation ul li{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	color: #fff;
	margin-left:40px;

}

.navigation ul li a{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color:#a7a7a7;
	display: block;
	padding-left:7px;
	padding-right:7px;
	padding-top:2px;
	padding-bottom:2px;
}

.navigation ul li a:hover{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color:#fff;
	display: block;
	background:#d23131;
	padding-left:7px;
	padding-right:7px;
	padding-top:2px;
	padding-bottom:2px;
}

.navigationactive{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color:#fff;
	display: block;
	background:#d23131;
	padding-left:7px;
	padding-right:7px;
	padding-top:2px;
	padding-bottom:2px;
}

<div class="navigation">
	<ul>
	<li><a href="#">CONTACT</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">FREEBIES</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#" class="navigationactive">HOME</a></li>
    </ul>
</div>

我希望与navigationactive类的链接为白色，但是它从它所在的div获取它的类，我不确定如何修复它。

澄清一下，红色框中的文字在悬停之前应该是白色的。

Answer 1

只需使.navigationactive类的规则更具体，例如.navigation ul li a.navigationactive

如前所述，由于更具体的规则.navigationactive，.navigation ul li a未被识别。

另外，您可以大大减少获得相同结果所需的CSS数量。例如，a:hover应该继承相应a的所有规则，因此，在这种情况下，如果您只是更改背景颜色，则无需重复所有规则徘徊。

.navigation{
	float: right;
	margin-top:23px;
}

.navigation ul{
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
}

.navigation ul li{
	float: right;
	margin-left:40px;
}

.navigation ul li a {
	font-weight:bolder;
	text-decoration: none;
	color:#a7a7a7;
	display: block;
    padding: 2px 7px;
}

.navigation ul li a:hover,
.navigation ul li a.navigationactive {
  color: #FFFFFF;
  background:#d23131;
}

<div class="navigation">
	<ul>
	<li><a href="#">CONTACT</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">FREEBIES</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#" class="navigationactive">HOME</a></li>
    </ul>
</div>

Answer 2

问题与css优先级如何工作有关，第一个presedence是id（＃），而lower是class（。）更大的级联规则有一个更大的先行者，更短的级联规则如此： .class ul li a有一个更大的优先级.class解决问题，只需添加更大的级联规则.navigation ul li a.navigationactive

.navigation{
	float: right;
	margin-top:23px;
	font-weight:bolder;
}

.navigation ul{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	color: #fff;
}

.navigation ul li{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	color: #fff;
	margin-left:40px;

}

.navigation ul li a{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color:#a7a7a7;
	display: block;
	padding-left:7px;
	padding-right:7px;
	padding-top:2px;
	padding-bottom:2px;
}

.navigation ul li a:hover{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color:#fff;
	display: block;
	background:#d23131;
	padding-left:7px;
	padding-right:7px;
	padding-top:2px;
	padding-bottom:2px;
}

.navigation ul li a.navigationactive{
	float: right;
	font-weight:bolder;
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color:#fff;
	display: block;
	background:#d23131;
	padding-left:7px;
	padding-right:7px;
	padding-top:2px;
	padding-bottom:2px;
}

<div class="navigation">
	<ul>
	<li><a href="#">CONTACT</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">FREEBIES</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#" class="navigationactive">HOME</a></li>
    </ul>
</div>