从特定的锚点标签中移除下划线

Question

从特定的锚点标签中移除下划线

15

为什么以下锚点标签的文本有下划线？

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

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

- TPR

4个回答

1

在样式中使用text-decoration:none来取消a标签的下划线。

例如：

<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/

- Shyju

1

它没有起作用，但是我没有在<head>中使用CSS，这样你就知道了。 - TPR

@progtick，它正在继承某个类，您可以使用Firebug查看它正在继承哪个类。 - kobe

1

我还不能留下评论，我知道这是一个老问题，但在声明中使用! important时要非常小心：

text-decoration: none !important;

在较小的项目中，您可能会轻松解决它，但对于任何涉及多个来源协作的非平凡项目，当它覆盖我需要进一步设置的属性时，这种情况可能会非常烦人。我不仅必须更改此内容以使我的修复程序生效，而且还必须检查更改是否不会破坏其他内容，而这可能会发生。

更好的方法是重构您的声明或重构代码，以便您不需要使用!important，并且只有在无法避免时才回退到!important。

- Matt Styles

0

要去掉下划线，您需要按照以下样式代码片段进行操作。

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

- Thimira Dunuville

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frédéric Hamidi · Accepted Answer

可能是因为另一个样式块的优先级比你的 pagerLink 类更高。尝试使用以下代码：

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