Question

为什么跟随锚标记的文字加下划线？

<a class = "pagerLink" href = "#" >test</a>

.pagerLink{
  background-color: #E4F5F8;
  border:1px solid #C0DEED; 
  text-decoration:none; 
}

Answer 1

可能是因为另一个样式块比pagerLink类更好precedence。尝试：

.pagerLink {
    background-color: #E4F5F8;
    border: 1px solid #C0DEED; 
    text-decoration: none !important;
}

Answer 2

在你的风格中使用text-decoration：none

前：

<head>  
 <style>

  .pagerLink
   {
     background-color: #E4F5F8;
     border:1px solid #C0DEED; 
   }
  .pagerLink a
  {
    text-decoration:none !important;
  }
 </style>
</head>

<body>
  <div class="pagerLink">
    <a href="somepage.aspx">test</a>
  </div>
</body>

你可以使用firebug（一个firefox插件）来找出现在用于元素的样式以及是否被其他样式定义覆盖

http://getfirebug.com/

Answer 3

我不能发表评论，我尊重这是一个老问题，但在你的宣言中使用！important时要格外小心：

text-decoration: none !important;

你可能会在较小的项目中侥幸逃脱，但是任何涉及来自多个来源的合作的非平凡项目，当它超越我需要进一步设置的属性时，这种事情会非常烦人。我不仅需要更改它以使我的修复棒，但我还必须检查更改它不会破坏其他任何东西，它可能会。

最好是重构您的声明或重新构建您的代码，这样您就不必使用!important而会在您不能使用时再回到!important。

Answer 4

要删除下划线，您需要遵循以下样式代码段。

.pagerLink{
  background-color: #E4F5F8;
  border:1px solid #C0DEED; 
  text-decoration:none !important;
}

从特定锚标记中删除下划线

4 个答案: