logo标签列表

去除链接中的蓝色下划线

csshyperlinkunderline
715
我试图使链接以白色呈现，没有下划线。文字颜色正确地显示为白色，但蓝色的下划线仍然存在。我尝试在CSS中使用text-decoration: none;和text-decoration: none !important;来移除链接下划线，但都没有成功。 

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}
<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

如何去掉链接的蓝色下划线？

2
当你使用text-decoration:none时，它应该会消失。你确定你将其应用于正确的元素吗？你能提供示例代码吗？ - Davor Lucic
text-decoration: none 在哪里被使用了？ - shuttle87
22个回答
3

对我来说，所有的答案都没有起作用。 在我的情况下，存在一个标准

a:-webkit-any-link {
    text-decoration: underline;

在我的代码中，无论链接是什么，文本颜色都会变为蓝色，并且链接保持不变。

因此，我在头部添加了以下代码：

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

问题已经解决了。
示例1（MDN）和示例2（Stack Overflow）演示了如何使用“a:-webkit-any-link {”。 - Peter Mortensen
3

更新2023

这个问题已经有点老了。自从一段时间以来，您可以使用CSS中的all: unset删除标签的所有特征。

.w {
  font-size: 1.4rem;
}

.w .s2 a, .w .s3 a {
  all: unset;
}

.w .s3 a {
  color: magenta;
}
<div class="w">
  <div class="s1">
    <a href="">link A</a>
  </div>
  
  <div class="s2">
    <a href="">link B</a>
  </div>  
  
  <div class="s3">
    <a href="">link C</a>
  </div>    
</div>

2

您在错误的选择器中使用了text-decoration: none。您需要检查需要使用哪个标签进行none修饰。

您可以使用以下代码：

.boxhead h2 a {
    text-decoration: none;
}

或者

.boxhead a {
    text-decoration: none !important;
}

或者

a {
    text-decoration: none !important;
}
2

正如其他人指出的那样，似乎无法覆盖嵌套的文本装饰样式... 但是您可以更改text-decoration-color。

作为一个hack，我将颜色更改为透明：

    text-decoration-color: transparent;
1

只需使用属性

border: 0;

并且你已经解决了问题。当text-decoration属性完全无效时，这对我非常有效。
1
如果text-decoration: none或border: 0无效，请尝试在HTML内容中应用内联样式。
怎么做？你能详细说明一下吗？例如，可以提供一个例子吗？ - Peter Mortensen
1
在我的重置中，CSS通常是这样的：
a {
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
}
0

覆盖嵌套的文本装饰样式。

查找任何::before或::after选择器，并将任何文本装饰、下边框等设置为无显示，或重置属性（未设置）到任何文本颜色属性，如：text-decoration-color、background-color等。

.boxhead .otherPage {
    color: #FFFFFF;
}

a.boxhead .otherPage:before {
    background-color: unset;
}

或者

a.boxhead .otherPage:before {
    background-color: unset !important;
}
0
将以下 HTML 代码放在 <BODY> 标签之前：

<STYLE>A {text-decoration: none;} </STYLE>

0
在我的情况下，我有格式不良的HTML。链接位于<u>标签中，而不是<ul>标签中。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接