如何为HTML marquee添加链接并保留原有样式？

给marquee添加链接后样式被覆盖，是因为浏览器自带的<a>标签默认样式（比如蓝色文字、下划线）会覆盖你设置的.Marquee类样式。直接给.Marquee下的链接单独设置样式就能解决，步骤如下：

修改后的CSS代码 #

.Marquee {
  color: #da6fe2;
  background-color: transparent;
  font-family: work sans;
  font-size: 34px;
  line-height: 50px;
  padding: 0px;
  font-weight: bold;
}

/* 针对marquee里的链接设置样式 */
.Marquee a {
  color: inherit; /* 继承父元素的文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  /* 如果有其他样式冲突，可加!important强制生效 */
  /* text-decoration: none !important; */
}

/* 覆盖链接交互状态的默认样式，确保全程无变化 */
.Marquee a:hover,
.Marquee a:active,
.Marquee a:visited {
  color: inherit;
  text-decoration: none;
}

修改后的HTML代码 #

把需要加链接的文字用<a>标签包裹，替换成你的目标链接地址即可：

<marquee class="Marquee" direction="right" scrollamount="4" behavior="scroll">
  <a href="你的链接地址">HELLO</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  <a href="你的链接地址">HELLO</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  <a href="你的链接地址">HELLO</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  <a href="你的链接地址">HELLO</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  <a href="你的链接地址">HELLO</a>
</marquee>

关键说明 #

• color: inherit：让链接文字直接复用marquee的颜色，不用重复写色值
• 给a:hover、a:active、a:visited都设置相同样式，避免鼠标悬停、点击后文字变色或出现下划线
• 如果页面有其他全局的a标签样式干扰，可以给.Marquee a的样式加!important强制优先级

内容的提问来源于stack exchange，提问作者Eli Faz