从链接中删除顽固的下划线

时间:2010-05-07 15:29:22

标签: css hyperlink underline

我试图将链接显示为白色,没有下划线。文本颜色正确显示为白色,但蓝色下划线固执地持续存在。我在CSS中尝试了text-decoration: none;text-decoration: none !important;以删除链接下划线。都没有奏效。

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}
<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

如何从链接中删除蓝色下划线?

19 个答案:

答案 0 :(得分:698)

正如我所料,您没有将text-decoration: none;应用于锚点(.boxhead a),而是应用于span元素(.boxhead)。

试试这个:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

答案 1 :(得分:190)

锚标记(链接)也有伪类,如访问,悬停,链接和活动。确保您的样式适用于相关的状态,并且没有其他样式存在冲突。

例如:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

有关用户操作伪类的更多信息,请参阅W3.org:hover,:active和:focus。

答案 2 :(得分:28)

text-decoration: none !important应将其删除..您确定没有border-bottom: 1px solid潜伏吗? (在IE中跟踪Firebug / F12中的计算样式)

答案 3 :(得分:23)

只需将此属性添加到锚标记

即可

style="text-decoration:none;"

示例:

<a href="page.html"  style="text-decoration:none;"></a>

或者使用CSS方式。

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

答案 4 :(得分:12)

有时你看到的是一个盒子阴影,而不是文字下划线。

试试这个(使用适合你的CSS选择器):

  class Parent{
      int grandchildren

      def beforeUpdate(){

      }
  }

  class Child{
      Parent parent
      int childCount

      def beforeInsert(){
          // 1: Works, beforeUpdate is called in Parent
          parent.grandchildren+=childCount
          parent.save()
      }

      def beforeUpdate(){
          // 2: Does not work, grandchildren not updated and beforeUpdate not called in Parent
          parent.grandchildren+=childCount
          parent.save()
      }
  }

答案 5 :(得分:11)

您错过from __future__ import print_function book1 = ['The', 'family', 'of', 'Dashwood', 'had', 'long', 'been'] book2 = ['let', 'it', 'divide', 'the', 'waters'] books = [book1, book2] for book in books: words = [''] for w in book: words.append(w.lower()) print(words.count('the')) 锚标记。所以代码应该遵循。

text-decoration:none
.boxhead a {
    text-decoration: none;
}

文字装饰的更多标准属性

enter image description here

答案 6 :(得分:8)

通常,如果你的“下划线”与你的文字颜色不同[并且'颜色:'没有被内联覆盖],那么它不是来自“文字装饰:”它必须是“边界 - 底部:“

不要忘记从伪类上取下边框!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

这个片段假设它在一个锚点上,相应地更改它的包装器...并在追踪根本原因后使用特异性而不是“!important”。

答案 7 :(得分:7)

没有看到页面,很难推测。

但对我来说听起来好像你可能会申请border-bottom: 1px solid blue;。也许添加border: none;text-decoration: none !important是对的,你可能有另一种风格仍然覆盖了CSS。

这是使用Firefox Web Developer Toolbar很棒的地方,你可以在那里编辑CSS,看看是否有用,至少对于Firefox来说。它在CSS > Edit CSS下。

答案 8 :(得分:3)

虽然其他答案都是正确的,但有一种简单的方法可以摆脱所有这些讨厌的链接的下划线:

a {
   text-decoration:none;
}

这将删除您网页上每个单一链接的下划线!

答案 9 :(得分:1)

只需使用属性

border:0;

你被覆盖了。当文本装饰属性完全起作用时,完美地为我工作。

答案 10 :(得分:1)

没有一个答案对我有用。就我而言,有一个标准

a:-webkit-any-link {
text-decoration: underline;

在我的代码中。基本上无论它是什么链接,文本颜色都变为蓝色,而链接保持不变。

所以我将代码添加到标题的末尾,如下所示:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

问题不再存在。

答案 11 :(得分:0)

如果text-decoration: noneborder: 0不起作用,请尝试在html中应用内联样式。

答案 12 :(得分:0)

您在错误的选择器中未使用文本修饰。您需要检查不需要装饰的标签。

您可以使用此代码

.boxhead h2 a{text-decoration: none;}

OR

.boxhead a{text-decoration: none !important;}

OR

a{text-decoration: none !important;}

答案 13 :(得分:0)

将以下HTML代码放在 <BODY>标记:

<STYLE>A {text-decoration: none;} </STYLE>

答案 14 :(得分:0)

就我而言,我的HTML格式不正确。链接位于<u>标记内,而不是<ul>标记内。

答案 15 :(得分:0)

  a {
    color: unset;
    text-decoration: unset;
  }

答案 16 :(得分:0)

正如其他人指出的那样,似乎您无法覆盖嵌套的文本装饰样式...但是您可以更改文本装饰颜色。

作为一种技巧,我将颜色更改为透明:

text-decoration-color: transparent;

答案 17 :(得分:0)

设置文本修饰:无;锚标签。

示例html。

<body>
    <ul class="nav-tabs">
        <li><a href="#"><i class="fas fa-th"></i>Business</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

示例CSS:

.nav-tabs li a{
  text-decoration: none;
}

答案 18 :(得分:-1)

以下是asp.net webforms LinkBut​​ton控件的示例:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

代码背后:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")