时间戳

首页 > 解决方案 > 用不同的链接颜色覆盖 CSS

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

问题描述

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

您可以在随附的屏幕截图中看到它的外观。

谢谢！

标签： htmlcss

解决方案

您的链接 css 格式不正确。而不是放入a:hover.announcestripe insert 。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>

推荐阅读