样式问题：text-decoration:none 在页脚链接中不生效

阿华AIGC实验室

2026-5-1

解决页脚链接text-decoration:none不生效的问题

嘿，我一眼就看出问题所在了——你把text-decoration: none加到了<li>元素上（比如.company-item这类类），但默认带下划线的是<a>标签本身，而且text-decoration是个不支持继承的CSS属性，所以给父元素li设置的样式根本不会传递给里面的a标签。再加上Bootstrap自带的a标签样式优先级比你当前的选择器更高，自然就没效果了。

给你几个可行的解决方案：

方案1：用后代选择器直接选中a标签

修改你的CSS，针对列表项里的a标签直接设置样式，这样选择器的优先级足够覆盖Bootstrap的默认样式：

.custom-footer{ background-color: tomato; }
.list-items{ list-style: none; margin: 0; padding: 0; }
/* 统一给页脚内所有a标签设置样式 */
.custom-footer a {
  text-decoration: none;
  color: inherit;
}
/* 也可以针对不同类的列表项分别设置 */
.company-item a,
.product-item a,
.social-icons a,
.legal-link a {
  text-decoration: none;
  color: inherit;
}

方案2：给a标签直接添加自定义类

如果需要更灵活的控制，可以给每个a标签加上统一的自定义类，比如：

<li><a class="footer-link" href="">Become a rider</a></li>

然后在CSS里定义这个类的样式：

.footer-link {
  text-decoration: none;
  color: inherit;
  /* 如果还是被Bootstrap样式覆盖，可临时用!important（不推荐频繁使用，优先优化选择器） */
  /* text-decoration: none !important; */
}