从css中的链接中删除下划线答案

【问题标题】：Removing an underline from a link in css从css中的链接中删除下划线
【发布时间】：2014-10-20 08:44:08
【问题描述】：

我一直在尝试从网页中删除难看的下划线，但由于某种原因它不会消失。

我尝试使用text-decoration:none; 和color: #FFFFFF; 无济于事。

原始css：

#noday {
    color: #ECECEC;
    font-family: "Times New Roman",Times,serif;
    font-size: 1em;
}

代码的sn-p：

<a href="http://www.example.com/content/" target"_blank"><div id="noday"><br><br>Random text here</div></a>

实例：http://jsfiddle.net/c0c6g4rd/

我看过：Remove stubborn underline from link，但没有帮助：/

【问题讨论】：

标签： html css

【解决方案1】：

只需将text-decoration:none; 添加到a 标签即可获得#noneall：

#noneall a{
    text-decoration:none;
}

这是jsfiddle。

【讨论】：

或更一般的a { text-decoration: none; }

【解决方案2】：

试试这个，将id（或class）添加到您的a href

<a href="http://www.example.com/content/" id="thisLink" target"_blank">Random text here</a>

并将其添加到您的 css 文件中：

#thisLink{
    text-decoration: none;
}

这应该去掉下划线！

这里有一个 Jsfiddle：

http://jsfiddle.net/c0c6g4rd/4/

【讨论】：

【解决方案3】：

在你的css文件的开头添加：

a{
 text-decoration:none;
}

通过这些行，您将从 html 中的所有链接中删除此下划线。

【讨论】：

【解决方案4】：

只是为了确保，请尝试在您的 text-decoration: none 之后添加一个“！important”...即“a{text-decoration：none ！important}”。如果这确实有效，则存在层次结构问题，并且其他东西正在覆盖您的声明。还可以尝试将您的声明放在 CSS 的末尾以覆盖任何其他声明。

【讨论】：

【解决方案5】：

这个问题的根源在于您不能将div（块级元素）放在a（内联元素）中。但是，有更好的方法来做您想做的事情做。

正如其他人所说，这将适用于所有链接：

a { text-decoration: none; }

但是，如果您只想将其应用于那个链接，请像这样将 id 添加到a，而不是使用其他元素：

<a ... id="noday">...</a>

然后以同样的方式设置样式。

举个例子：

http://jsfiddle.net/9gsu9ok3/（为所有链接设置样式）

http://jsfiddle.net/9gsu9ok3/3/（仅对某些链接设置样式）

希望这会有所帮助。

【讨论】：