从链接中删除下划线答案

【问题标题】：Removing underline from link从链接中删除下划线
【发布时间】：2015-11-10 23:25:17
【问题描述】：

我有以下代码：

<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 上将 text-decoration 设置为 none。

请提出建议。

注意：删除引导 css 的链接确实会删除下划线，但我在代码的其他区域需要它。

【问题讨论】：

如果它适合你试试这个：.nodecor { text-decoration: none !important; }

标签： html css twitter-bootstrap-3

【解决方案1】：

试试这个：

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

将 text-decoration 设置为 div 和其他特定于 table 的标签是没有用的。该属性是专门为锚<a>标签定义的。

看看，如果这有帮助。

【讨论】：

不起作用。另外，请注意问题。标签已将其设置为无。
@Hele 更新了我的答案，试试看。

【解决方案2】：

它可能不会删除它，因为它在 fullcell 下。试试

.nodecor .fullcell {
    text-dcoration:none;
}

【讨论】：

【解决方案3】：

也添加

.nodecor:hover 
{
    text-decoration: none;
}

【讨论】：

【解决方案4】：

您应该增加规则的特异性，因为引导程序以 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>

参考：MDN - Specificity - w3.org - Cascading order

【讨论】：

唯一能解释发生这种情况的真正原因的答案+1

【解决方案5】：

它会在悬停时删除线：

a:hover
{
    text-decoration: none;
}

【讨论】：

【解决方案6】：

使用这个 css

.strowb1 a:hover {
  text-decoration: none;
}

【讨论】：

【解决方案7】：

a:hover、a:active、a:focus 如果您使用开发者工具（谷歌浏览器）检查，也可以使用这种样式。
覆盖a:hover 还不够。

.nodecor:hover, 
.nodecor:active, 
.nodecor:focus {
  text-decoration: none;
}

【讨论】：