[英]Overriding CSS with a Different Link Color
On my page, normal link color is blue and works well. 在我的页面上,正常链接颜色为蓝色,效果很好。 However, I want to have white links on red background in an alert box.
但是,我想在警报框中的红色背景上有白色链接。 Can't seem to get this to work.
似乎无法使它正常工作。 Tried ordering differently, using
!important
, etc. 使用
!important
等尝试排序不同。
.announcestripe { margin: 0 auto 0 auto; width: 964px; vertical-align: middle; text-align: left; color: #fff; background-color: red; padding: .5em; } a:link.announcestripe, a:visited.announcestripe, a:hover.announcestripe, a:active.announcestripe { color: #ffffff!important; text-decoration: underline; } .announcename { font-style: italic; font-weight: bold; padding-right: 1.5em; padding-left: 1em; font-size: 1.25em; } .announcetext1, .announcetext2 { font-size: 1em; padding-right: 1.5em; }
<div class="announcestripe"> <span class="announcename">LATEST NEWS:</span> <span class="announcetext1"><a href="https://www.architecturaldigest.com/story/universal-design-living-laboratory" target="_blank">UDLL Featured in Architectural Digest</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> <span class="announcetext2"><a href="https://somepage.jwpapp.com/" target="_blank">TEDx Talk About UDLL</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> </div>
Thanks! 谢谢!
You have your link css formatted incorrectly. 您的链接CSS格式错误。 Instead of putting
a:hover.announcestripe
insert . 而不是放置
a:hover.announcestripe
insert。 announcestripe
at the start; 一开始
announcestripe
.announcestripe a:hover
Then your desired formatting will work. .announcestripe a:hover
然后,您所需的格式将起作用。
.announcestripe { margin: 0 auto 0 auto; width: 964px; vertical-align: middle; text-align: left; color: #fff; background-color: red; padding: .5em; } .anouncestripe a:visited, .anouncestripe a:hover, .anouncestripe a:active { color: #ffffff!important; text-decoration: underline; } .announcename { font-style: italic; font-weight: bold; padding-right: 1.5em; padding-left: 1em; font-size: 1.25em; } .announcetext1, .announcetext2 { font-size: 1em; padding-right: 1.5em; }
<div class="announcestripe"> <span class="announcename">LATEST NEWS:</span> <span class="announcetext1"><a href="https://www.architecturaldigest.com/story/universal-design-living-laboratory" target="_blank">UDLL Featured in Architectural Digest</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> <span class="announcetext2"><a href="https://somepage.jwpapp.com/" target="_blank">TEDx Talk About UDLL</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> </div>
Given your HTML it has to be .announcestripe a:link
, not a:link.announcestripe
. 给定您的HTML,它必须是
.announcestripe a:link
,而不是a:link.announcestripe
。 The latter would only target a
elements with the class announcestripe
(which your HTML doesn't have), whereas the corrected selector targets a
elements that are descendants of an element with the class announcestripe
(which is the case in your HTML). 后者将只针对
a
与类元素announcestripe
(其您的HTML没有),而校正选择靶向a
是与类元素的后代元件announcestripe
(这是在HTML的情况下)。
.announcestripe { margin: 0 auto 0 auto; width: 964px; vertical-align: middle; text-align: left; color: #fff; background-color: red; padding: .5em; } .announcestripe a:link, .announcestripe a:visited, .announcestripe a:hover, .announcestripe a:active { color: #ffffff!important; text-decoration: underline; } .announcename { font-style: italic; font-weight: bold; padding-right: 1.5em; padding-left: 1em; font-size: 1.25em; } .announcetext1, .announcetext2 { font-size: 1em; padding-right: 1.5em; }
<div class="announcestripe"> <span class="announcename">LATEST NEWS:</span> <span class="announcetext1"><a href="https://www.architecturaldigest.com/story/universal-design-living-laboratory" target="_blank">UDLL Featured in Architectural Digest</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> <span class="announcetext2"><a href="https://somepage.jwpapp.com/" target="_blank">TEDx Talk About UDLL</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.