html - 用不同的链接颜色覆盖 CSS

Question

在我的页面上，正常的链接颜色是蓝色并且效果很好。但是，我希望在警告框中有红色背景上的白色链接。似乎无法使它正常工作。尝试以不同方式排序，使用 !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>

谢谢!

Answer 1

您的链接 CSS 格式不正确。而不是放置 a:hover.announcestripe在开头插入 .announcestripe； .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>