为何text-decoration:none属性不生效？多种尝试均无效

算力阿峰

2026-7-3

问题

在main.css中设置的text-decoration:none属性无法生效，尝试调整标签位置、多次添加该属性，甚至使用!important声明都没有效果，求解决办法。

原因分析

你把text-decoration:none加在了<li>标签上，但下划线实际来自包裹它的<a>标签——浏览器默认会给<a>标签添加下划线，且你引入的Bootstrap也可能对<a>标签有默认样式，所以给<li>加样式根本无法覆盖<a>的下划线。

解决方法

1. 直接给`<a>`标签设置样式

修改CSS，将针对<li>的样式改为针对<a>标签，同时确保hover状态也移除下划线：

/* 移除a标签默认下划线 */
aside ul a {
    text-decoration: none !important;
    color: #fff; /* 继承颜色，避免a标签默认蓝色 */
}

aside ul li:hover, aside ul a:hover {
    color: #eb5959;
    transform: scale(1.05);
    text-decoration: none !important; /* hover时也确保无下划线 */
}

2. 修正HTML结构（推荐）

当前HTML里<a>包裹<li>的写法不符合语义化规范，正确结构应为<li>包裹<a>，样式控制更合理：

<ul>
  <li><a href=""><i class="fas fa-home"></i>Главная</a></li>
  <li><a href=""><i class="fas fa-address-book"></i>Про нас</a></li>
  <li><a href="mailto:decsam@mail.com"><i class="fas fa-paper-plane"></i>Связаться с нами</a></li>
</ul>

对应CSS可调整为：

aside ul li {
    color: #fff;
    display: block;
    margin-top: 20px;
    transition: transform .6s ease;
}

aside ul li a {
    text-decoration: none;
    color: inherit; /* 继承li的颜色 */
}

aside ul li:hover, aside ul li a:hover {
    color: #eb5959;
    transform: scale(1.05);
    text-decoration: none;
}