用不同的链接颜色覆盖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>

Answer 2

鉴于您的HTML必须是.announcestripe a:link，而不是a:link.announcestripe。后者将仅以类a（您的HTML没有）的announcestripe元素为目标，而更正的选择器以后代的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>

Answer 3

.announcestripe {
  margin: 0 auto 0 auto;
  width: 964px;
  vertical-align: middle;
  text-align: left;
  color: #fff;
  background-color: red;
  padding: .5em;
}
/*Here I targeted the link inside your announce stripe*/
.announcestripe a{
color: white;
}


.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>

这里是男人，您只需要定位正确的元素