当前位置：文江博客话题详情

CSS hyperlink underline

删除链接中的蓝色下划线

发布于 2024-09-01 10:12:21 字数 656 浏览 8 评论 0原文

我试图让链接显示为白色，没有下划线。文本颜色正确显示为白色，但蓝色下划线顽固地存在。我尝试在 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>

如何删除链接中的蓝色下划线？

I am attempting to have a link show up in white, without an underline. The text color shows up correctly as white, but the blue underline is stubbornly persisting. I tried text-decoration: none; and text-decoration: none !important; in the CSS to remove the link underline. Neither worked.

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

How can I remove the blue underline from the link?

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（22）

肥爪爪 2024-09-08 10:12:21

您没有将 text-decoration: none; 应用于锚点 (.boxhead a)，而是应用于 span 元素 (.boxhead)。

试试这个：

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

You are not applying text-decoration: none; to an anchor (.boxhead a) but to a span element (.boxhead).

Try this:

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

回复收藏 0 原文

痴骨ら 2024-09-08 10:12:21

锚标记（链接）还具有诸如visited、hover、link和active等伪类。确保您的样式适用于相关状态，并且没有其他样式冲突。

例如：

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

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

The anchor tag (link) also has pseudo-classes such as visited, hover, link and active. Make sure your style is applied to the state(s) in question and that no other styles are conflicting.

For example:

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

See W3.org for more information on user action pseudo-classes :hover, :active, and :focus.

回复收藏 0 原文

一片旧的回忆 2024-09-08 10:12:21

text-decoration: none !important 应该将其删除..您确定没有 border-bottom: 1pxsolid 潜伏在其中吗？（在IE中跟踪Firebug/F12中的计算样式）

回复收藏 0 原文

财迷小姐 2024-09-08 10:12:21

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

style="text-decoration:none;"

示例：

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

或者使用 CSS 方式。

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

Just add this attribute to your anchor tag

style="text-decoration:none;"

Example:

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

Or use the CSS way.

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

回复收藏 0 原文

不可一世的女人 2024-09-08 10:12:21

有时您会看到方框阴影，而不是文本下划线。

试试这个（使用任何适合你的 CSS 选择器）：

a:hover, a:visited, a:link, a:active {
  text-decoration: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

Sometimes you're seeing a box shadow, not a text underline.

Try this (using whatever CSS selectors are appropriate for you):

a:hover, a:visited, a:link, a:active {
  text-decoration: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

回复收藏 0 原文

眉黛浅 2024-09-08 10:12:21

您错过了锚标记的text-decoration:none。所以代码应该如下。

.boxhead a {
    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>

文本装饰的更多标准属性

You missed text-decoration:none for the anchor tag. So the code should be the following.

.boxhead a {
    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>

More standard properties for text-decoration

回复收藏 0 原文

木有鱼丸 2024-09-08 10:12:21

通常，如果您的“下划线”与文本的颜色不同（并且“颜色：”未被内联覆盖），则它不是来自“文本装饰：”。它必须是“边框底部：”。

不要忘记也去掉伪类的边框！

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

该片段假设它位于锚点上。相应地更改其包装器...并在找到根本原因后使用特异性而不是“！重要”。

As a rule, if your "underline" is not the same color as your text (and the 'color:' is not overridden inline), it is not coming from "text-decoration:". It has to be "border-bottom:".

Don't forget to take the border off your pseudo classes too!

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

This snippet assumes it's on an anchor. Change to its wrapper accordingly... And use specificity instead of "!important" after you track down the root cause.

回复收藏 0 原文

烟织青萝梦 2024-09-08 10:12:21

在没有看到页面的情况下，很难推测。

但在我看来，您可能应用了 border-bottom: 1px Solid blue; 。也许添加border: none;。 text-decoration: none !important 是对的；不过，您可能有另一种样式仍然覆盖该 CSS。

这就是使用 Firefox Web 开发者工具栏的绝佳之处。您可以在那里编辑 CSS 并查看是否有效，至少对于 Firefox 而言是这样。它位于 CSS → 编辑 CSS 下。

回复收藏 0 原文

筑梦 2024-09-08 10:12:21

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

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

回复收藏 0 原文

寄意 2024-09-08 10:12:21

虽然其他答案是正确的，但有一个简单的方法可以消除所有这些讨厌的链接上的下划线：

a {
   text-decoration: none;
}

这将从页面上的每个链接中删除下划线！

While the other answers are correct, there is an easy way to get rid of the underline on all those pesky links:

a {
   text-decoration: none;
}

This will remove the underline from every single link on your page!

回复收藏 0 原文

望喜 2024-09-08 10:12:21

没有一个答案对我有用。有一个标准

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

就我而言，我的代码中。基本上，无论它是什么链接，文本颜色都会变成蓝色，并且链接保持不变。

所以我在标题末尾添加了这样的代码：

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

问题不再存在。

None of the answers worked for me. In my case there was a standard

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

in my code. Basically whatever link it is, the text color goes blue, and the link stays whatever it is.

So I added the code at the end of the header like this:

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

And the problem is no more.

回复收藏 0 原文

南汐寒笙箫 2024-09-08 10:12:21

2023 更新

这个问题已经有点老了。一段时间以来，您可以在 CSS 中使用 all: unset 删除标签的所有功能。

.w {
  font-size: 1.4rem;
}

.w .s2 a, .w .s3 a {
  all: unset;
}

.w .s3 a {
  color: magenta;
}

<div class="w">
  <div class="s1">
    <a href="">link A</a>
  </div>
  
  <div class="s2">
    <a href="">link B</a>
  </div>  
  
  <div class="s3">
    <a href="">link C</a>
  </div>    
</div>

Update 2023

The question is already a bit older. Since a while you can delete all features of a tag with all: unset in CSS.

.w {
  font-size: 1.4rem;
}

.w .s2 a, .w .s3 a {
  all: unset;
}

.w .s3 a {
  color: magenta;
}

<div class="w">
  <div class="s1">
    <a href="">link A</a>
  </div>
  
  <div class="s2">
    <a href="">link B</a>
  </div>  
  
  <div class="s3">
    <a href="">link C</a>
  </div>    
</div>

回复收藏 0 原文

毅然前行 2024-09-08 10:12:21

您在错误的选择器中使用了text-decoration: none。您需要检查您需要哪个标签来装饰无。

您可以使用此代码

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

或

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

或

a {
    text-decoration: none !important;
}

You've used text-decoration: none in the wrong selector. You need to check which tag do you need for decoration none.

You may use this code

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

Or

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

Or

a {
    text-decoration: none !important;
}

回复收藏 0 原文

深海里的那抹蓝 2024-09-08 10:12:21

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

作为一种破解，我将颜色更改为透明：

    text-decoration-color: transparent;

As others pointed out, it seems like you can't override nested text-decoration styles... But you can change the text-decoration-color.

As a hack, I changed the color to be transparent:

    text-decoration-color: transparent;

回复收藏 0 原文

む无字情书 2024-09-08 10:12:21

在我的重置中，CSS 通常是：

a {
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
}

In my reset, the CSS usually is:

a {
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
}

回复收藏 0 原文

两人的回忆 2024-09-08 10:12:21

只需使用该房产

border: 0;

即可享受保障。当 text-decoration 属性根本不起作用时，它对我来说非常有效。

Just use the property

border: 0;

and you are covered. It worked perfectly for me when the text-decoration property didn’t work at all.

回复收藏 0 原文

千纸鹤 2024-09-08 10:12:21

如果 text-decoration: none 或 border: 0 不起作用，请尝试在 HTML 内容中应用内联样式。

回复收藏 0 原文

荒芜了季节 2024-09-08 10:12:21

将以下 HTML 代码放在
标签：

回复收藏 0 原文

粉红×色少女 2024-09-08 10:12:21

就我而言，我的 HTML 格式很差。该链接位于标记内，而不是

回复收藏 0 原文

尽揽少女心 2024-09-08 10:12:21

设置text-decoration: none;作为锚标记。

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;
}

Set text-decoration: none; for the anchor tag.

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

Example CSS:

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

回复收藏 0 原文

悲喜皆因你 2024-09-08 10:12:21

覆盖嵌套文本装饰样式。

查找任何 ::before 或 ::after 选择器，并对任何文本装饰、边框底部等不显示任何内容，或将属性（未设置）重置为任何文本颜色属性，例如： 文本装饰颜色、背景颜色等

.boxhead .otherPage {
    color: #FFFFFF;
}

a.boxhead .otherPage:before {
    background-color: unset;
}

或

a.boxhead .otherPage:before {
    background-color: unset !important;
}

Overriding nested text-decoration styles.

Look for any ::before or ::after selectors and display none to any text-decoration, border-bottom, etc. or reset a property (unset) to any text color property like: text-decoration-color, background-color, etc.

.boxhead .otherPage {
    color: #FFFFFF;
}

a.boxhead .otherPage:before {
    background-color: unset;
}

or

a.boxhead .otherPage:before {
    background-color: unset !important;
}

回复收藏 0 原文

百变从容 2024-09-08 10:12:21

以下是 ASP.NET Web 表单 LinkButton 控件：

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

代码隐藏：

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

Here is an example for the ASP.NET Web Forms LinkButton control:

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

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

回复收藏 0 原文

~没有更多了~

关于作者

因为看清所以看轻

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

尘世孤行

文章 0 评论 0

烟─花易冷

文章 0 评论 0

你是年少的欢喜

文章 0 评论 0

倒带

文章 0 评论 0

忱杏

文章 0 评论 0

送君千里

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文