【问题标题】: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/(仅对某些链接设置样式)

          希望这会有所帮助。

          【讨论】: