HTML – 自定义链接颜色被覆盖

概述我在样式表中将某些文本设置为某种颜色时出现问题,但后来我定义了一个具有悬停样式的链接,但悬停样式却没有显示.这是我的CSS所拥有的 .parkName{color: #5a712d; font-size:25px;}a.cardLinkOverlay:link {color: #GERFG4 !important;}a.cardLinkOverlay:visited {}a.cardLink 我在样式表中将某些文本设置为某种颜色时出现问题,但后来我定义了一个具有悬停样式的链接,但悬停样式却没有显示.这是我的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”在悬停时改变颜色吗？

解决方法 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/" >	<div >		<div >				<img src="http://goo.gl/DsstWK" wIDth="170" height="95.5">			  </div>			  		<div >			<div >Yosemite</span></div>			<div >National Park</div>		</div>				<div >			<div ><span ></span></div>		</div>	</div></a>

总结

以上是内存溢出为你收集整理的HTML – 自定义链接颜色被覆盖全部内容，希望文章能够帮你解决HTML – 自定义链接颜色被覆盖所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。