从链接中删除下划线
我有以下代码:
<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