无法移除锚点标签text-decoration？点击返回后样式复现求助

我没法去掉网页里<a>标签的text-decoration，试了好多次都没用。初始状态下下划线是消失的，但点击链接再返回浏览器，下划线又出来了。这是浏览器bug吗？还是要加更多CSS代码修复？怎么解决？

我尝试过的代码 #

CSS代码 #

/*
a > div p {
  text-decoration: none !important;
  color: white;
}

a:link > div p {
  text-decoration: none !important;
  color: white;
}

.izquierda a > div p {
  text-decoration: none !important;
  color: white;
} 
*/

a,
a:visited {
  text-decoration: none !important;
  /*color: white;*/
}

HTML代码 #

<div class="opciones">
  <!-- OPCIONES DIVIDIDAS A LA IZQUIERDA -->
  <div class="izquierda">
    <a class="anchor" href="/editar_perfil.html">
      <div class="editar-perfil">
        <img
          src="http://placekitten.com/200/300"
          alt="Icono de Editar Perfil"
          title="Puedes editar la biografía e imagen de tu perfil."
        />
        <p>Editar Perfil</p>
      </div>
    </a>
  </div>
</div>

在代码片段里下划线没出现，但在Opera GX浏览器里样式还是存在，且点击返回后复现。

问题原因 #

这不是浏览器bug，核心问题是你只覆盖了a和a:visited伪类，没覆盖**:focus、:active这些链接状态**——点击链接返回后，浏览器可能会保留链接的焦点状态，触发默认的下划线样式；另外嵌套结构下，父级<a>的样式可能会继承给内部的<p>，导致下划线显现。

解决方法 #

1. 覆盖所有链接伪类，用精准选择器提高优先级 #

不要滥用!important，用更具体的选择器覆盖所有链接状态：

/* 精准定位目标锚点，覆盖所有伪类状态 */
.izquierda a.anchor,
.izquierda a.anchor:link,
.izquierda a.anchor:visited,
.izquierda a.anchor:hover,
.izquierda a.anchor:active,
.izquierda a.anchor:focus {
  text-decoration: none;
  color: white; /* 按需设置文字颜色 */
}

2. 直接给内部文本标签设置样式 #

因为下划线可能通过继承传递给<p>标签，直接给内部元素设置text-decoration: none彻底阻断继承：

.izquierda a.anchor .editar-perfil p {
  text-decoration: none;
}

3. 处理焦点状态（可选，注意可访问性） #

如果是焦点状态导致的下划线，可禁用默认焦点样式，但建议替换为自定义样式保证可访问性：

.izquierda a.anchor:focus {
  outline: none; /* 禁用默认焦点框 */
  /* 可选：添加自定义焦点样式，比如边框 */
  border: 2px solid #your-focus-color;
}

内容的提问来源于stack exchange，提问作者Andres Andes