从链接中删除下划线

我有以下代码:

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        .nodecor 
        {
            text-decoration: none;
        }

        .strowb1 
        { 
            width: 150px; 
            height: 35px; 
            background-color: #1F375F; 
            text-align: center; 
            color: #999999; 
            font-family: calibri; 
            font-weight: bold; 
            font-size: 110%; 
            display: block; 
        }
        .fullcell 
        { 
            height: 100%; 
            width: 100%; 
            color: #999999;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="strowb1">
                <a class="nodecor" href="#">
                    <div class="fullcell">Watch</div>
                </a>
            </td>
        </tr>
    </table>
</body>
</html>

执行时,“Watch”在悬停时有非常持久的下划线。 设置text-decoration: none似乎没有删除它。

我已经尝试在表格,tr,td和div上设置文本修饰。

请提出建议。

注意:删除链接到引导CSS不会删除下划线,但我需要在代码的其他部分。


您应该提高规则的特异性,因为引导程序的目标a:hover并优先。 另一种选择是在启动后添加相同的特定规则。 如果两个声明具有相同的权重,起源和特异性,则后者指定获胜。

.nodecor:hover {
  text-decoration: none;
}
.strowb1 {
  width: 150px;
  height: 35px;
  background-color: #1F375F;
  text-align: center;
  color: #999999;
  font-family: calibri;
  font-weight: bold;
  font-size: 110%;
  display: block;
}
.fullcell {
  height: 100%;
  width: 100%;
  color: #999999;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table>
  <tr>
    <td class="strowb1">
      <a class="nodecor" href="#">
        <div class="fullcell">Watch</div>
      </a>
    </td>
  </tr>
</table>

尝试这个:

<style>
a{
text-decoration:none;
}
a:hover 
{
   text-decoration: none;
}
<style>

将文本修饰设置为div,以及其他特定于表格的标记没有用处。 该属性专门为anchor <a>标记定义。

看,如果有帮助。


也加

.nodecor:hover 
{
    text-decoration: none;
}
链接地址: http://www.djcxy.com/p/74619.html

上一篇: Removing underline from link

下一篇: decoration underline from :after content