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

时间:2014-10-19 23:38:58

标签: html css css3

我一直试图从网页上删除一个丑陋的下划线但由于某种原因它只是不会消失。

我尝试使用text-decoration:none;color: #FFFFFF;无效。

原css:

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

代码片段:

<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,但它没有帮助:/

5 个答案:

答案 0 :(得分:8)

只需将text-decoration:none;添加到a的{​​{1}}标记:

#noneall

这是jsfiddle

答案 1 :(得分:1)

试试这个,将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/

答案 2 :(得分:1)

在css文件的开头添加:

a{
 text-decoration:none;
}

使用这些行,您将从html中的所有链接中删除此下划线。

答案 3 :(得分:0)

为了确保,请尝试添加&#34;!important&#34;你的文字装饰后:没有......那是&#34;一个{text-decoration:none!important}&#34;。如果确实有效,则会出现层次结构问题,而其他内容则会覆盖您的声明。另外,尝试将声明放在CSS的END处以覆盖任何其他声明。

答案 4 :(得分:0)

此问题的根源在于您无法在div(内联元素)中放置a(块级元素)。但是,有更好的方法可以做你正在尝试做什么。

正如其他人所说,这将适用于所有链接:

a { text-decoration: none; }

但是,如果您只想将其应用于该链接,请将ID添加到a,而不是使用其他元素:

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

然后以相同的方式设置风格。

小例子:

http://jsfiddle.net/9gsu9ok3/(样式所有链接)

http://jsfiddle.net/9gsu9ok3/3/(仅限某些链接)

希望这有帮助。