html - 自定义链接颜色被覆盖

Question

当我在样式表中将某些文本设置为某种颜色时遇到问题，但后来我定义了一个具有悬停样式的链接，但该悬停样式并未显示。这是我的 CSS 内容

.parkName{color: #5a712d; font-size:25px;}
a.cardLinkOverlay:link {color: #GERFG4 !important;}
a.cardLinkOverlay:visited {}
a.cardLinkOverlay:active {color: #2495d5 !important;}
a.cardLinkOverlay:hover {color: #2495d5 !important;}

这是一个 JSFiddle，展示了我目前所拥有的:http://jsfiddle.net/rctfan1999/8vr00tzq/2/
如果您注意到“优胜美地”这个词有颜色，但与“国家公园”这个词不同的是，当您将鼠标悬停在它上面时，它不会改变颜色。谁能告诉我如何让“Yosemite”在悬停时改变颜色？

Answer 1

a.cardLinkOverlay 上定义的颜色不适用于 .parkName，因为 .parkName 是 a 的子元素。 cardLinkOverlay。因此，.parkName 规则优先于应用于父元素的 CSS 规则定义的颜色值的任何继承。

解决它的方法是定义一个专门针对元素的 CSS 规则，在这种情况下，使用选择器:a.cardLinkOverlay:hover .parkName。

请注意，您可以省略不需要的 !important 限定符。

.parkType {
    font-size:15px;
    font-weight:bold;
}
.parkName {
    color: #5a712d;
    font-size:25px;
}
a.cardLinkOverlay:link {
    color: #GERFG4;
}
a.cardLinkOverlay:visited {
}
a.cardLinkOverlay:active {
    color: #2495d5;
}
a.cardLinkOverlay:hover {
    color: #2495d5;
}
a.cardLinkOverlay:hover .parkName {
    color: #2495d5;
}

<a href="http://example.com/page/" class="cardLinkOverlay">
	<div class="cardLink">
		<div class="col-md-2">
				<img src="http://goo.gl/DsstWK" width="170" height="95.5">
			  </div>
			  
		<div class="col-md-9">
			<div class="parkName">Yosemite</span></div>
			<div class="parkType">National Park</div>
		</div>
		
		<div class="col-md-1">
			<div class="hidden-xs"><span class="glyphicon glyphicon-menu-right"></span></div>
		</div>
	</div>
</a>