CSS关于链接下划线的问题

Posted 2023-04-19

现在要实现如下功能。
1.网站有一个导航栏 导航栏里面的文字没有下划线，反正永远没有，点击之后不变色
2.还有一个文章标题，但是它在鼠标移动上去的时候有下划线。点击之后变色

呵呵 这问题其实很简单啦！
1.
在css中对a进行设置:
atext-decoration:none;
文字没有下划线，点击之后也不变色。
2.
同样在css中对a进行设置:
a:linkcolor:blue;text-decoration:none;
a:hovercolor:blue;text-decoration:underline;
a:visitedcolor:red;text-decoration:none;
则鼠标移动上去的时候有下划线，点击之后颜色从蓝色变红色 。

css a:链接属性
a:link

设置a对象在未被访问前的样式表属性

a:visited

设置a对象在其链接地址已被访问过时的样式表属性。

a:hover

设置对象在其鼠标悬停时的样式表属性

a:active

设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。

参考资料：http://hi.baidu.com/%C5%D3%BD%BF%CF%BC/blog/item/c95453de10c0fc5eccbf1ac2.html

参考技术A a:link
color:访问前的颜色; text-decoration: none
a:visited
color:访问后的颜色; text-decoration: none
a:active
text-decoration: none
a:hover
color: 鼠标经过的颜色; text-decoration: underline鼠标经过显示下划线 参考技术B A 是文字的颜色
/A:link 是有连接的文字的颜色
/A:visited 已经访问的连接的颜色
/A:active 活动连接的颜色
/A:hover 鼠标经过的颜色 参考技术C 1.
<style>
acolor:blue;text-decoration:none;
a:hovercolor:red;text-decoration:none;
</style>
<A href="a.asp">dddddd</a>
2.<style>
a:linkcolor:blue;text-decoration:none;
a:hovercolor:red;text-decoration:underline;
a:visitedcolor:red;text-decoration:none;
</style>
<A href="a.asp">dddddd</a>

如何删除锚点（链接）的下划线？

【中文标题】如何删除锚点（链接）的下划线？

【英文标题】：How to remove the underline for anchors(links)?

【发布时间】：2011-01-03 17:24:47

【问题描述】：

是否有（在 CSS 中）避免页面中引入的文本和链接的下划线..？

【问题讨论】：

你永远不能假设浏览器会如何呈现你的 HTML。标签呈现浏览器默认选择显示为下划线的锚点。 u 是唯一的下划线标签。下面的答案是 CSS 答案

具有讽刺意味的是，有人学究到足以发表此评论，但不够学究以正确拼写这个词（甚至连拼写都没有！）让我大吃一惊。

除了下面的答案，还应该考虑处理a:hover，大多数流行的浏览器倾向于在悬停时在锚点上显示下划线。

【参考方案1】：

使用 CSS。这将删除 a 和 u 元素的下划线：

a, u 
  text-decoration: none;

有时您需要覆盖元素的其他样式，在这种情况下，您可以在规则上使用!important 修饰符：

a 
  text-decoration: none !important;

【讨论】：

如果为body添加color: black !important;，是否也会将所有元素（包括锚点、访问的锚点、悬停的锚点）设置为始终为黑色？

Ωmega Δ，显然不是，感谢您指出，我在整体规则中发现了一个错误。我已经更新了我的答案。

我发现如果你为body元素设置样式text-decoration: none !important;，那么只有当你为a元素显式设置样式text-decoration: inherit;时它才对锚有效。

通常最好避免!important 并使用特异性和基数来覆盖样式，否则您最终可能会得到一个充满!important 的样式表，而无需了解使其必要的结构。这是 IMO 的代码气味。

!important 就像拥有核武器一样。但是一旦你开始并被引诱使用!important 其他元素可能会得到它（nuke）并且优势消失了，有利于陷入僵局，这对世界来说是伟大的，因为 MUD 确保和平，但在 css 的世界中，这样的和平意味着你不能给予某些东西优势。

【参考方案2】：

css是

text-decoration: none;

和

text-decoration: underline;

【参考方案3】：

这将删除您的颜色以及锚标记存在的下划线

a 
  text-decoration: none;


a:hover 
  color: white;
  text-decoration: none;
  cursor: pointer;

【参考方案4】：

最简单的选择是这样的：

<a style="text-decoration: none">No underline</a>

当然，将 CSS 与 HTML 混合（即内联 CSS）并不是一个好主意，尤其是当您到处使用 a 标签时。 这就是为什么最好将它添加到样式表中：

a 
    text-decoration: none;

甚至是 JS 文件中的这段代码：

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) 
    els[el].style["text-decoration"] = "none";

【讨论】：

Iphone/Android 不是很好的基准，因为它们不代表 Gmail 或 Outlook 的向后 HTML 呈现。

@XLogic：非常感谢

【参考方案5】：

使用 CSS 删除 text-decorations。

a 
  text-decoration: none;

【参考方案6】：

如果您只想从锚链接中删除下划线，您的最佳选择-

#content a 
    text-decoration-line:none;

这将删除下划线。

此外，您也可以使用类似的语法来操作其他样式 -

text-decoration: none;
text-decoration-color: blue;
text-decoration-skip: spaces;
text-decoration-style: dotted;

希望这会有所帮助！

P.S.-这是我第一次回答！

【参考方案7】：

有时它会被一些渲染 UI CSS 覆盖。更好用：

a.className 
  text-decoration: none !important;

【讨论】：

这是一个糟糕的主意。 ***.com/questions/8360190/…

【参考方案8】：

在我的例子中，有一条关于锚点悬停效果的规则，如下所示：

#content a:hover 
  border-bottom: 1px solid #333;

当然，text-decoration: none; 在这种情况下也无能为力。 我花了很多时间才发现它。

所以：不要将下划线与底部边框混淆。

【参考方案9】：

我在网络打印中遇到过这个问题并解决了。验证结果。

a 
  text-decoration: none !important;

有效！

【参考方案10】：

为问题提供另一个视角（从原始帖子的标题/内容推断）：

如果您想追踪在您的 HTML 中创建恶意下划线的原因，请使用调试工具。有很多可供选择：

对于 Firefox，有 FireBug；

对于 Opera，有 Dragonfly（在工具->高级菜单中称为“开发者工具”；Opera 默认自带）；

IE 有“Internet Explorer Developer Toolbar”，IE7 及以下版本单独下载，集成在 IE8 中（按 F12）。

我对 Safari、Chrome 和其他少数浏览器一无所知，但无论如何，您的机器上应该至少有上述三种浏览器中的一种。

【讨论】：

Safari 3/4：macobserver.com/tmo/article/Safari_3.1_The_Magical_Develop_Menu

【参考方案11】：

如果您只想将锚标记用作链接而不添加样式（例如悬停时的下划线或蓝色），请将class="no-style" 添加到锚标记。然后在您的全局样式表中创建“no-style”类。

.no-style 
    text-decoration: none !important;

这有两个好处。

它不会影响所有锚标签，只会影响添加了“no-style”类的标签。 它将覆盖任何其他样式，否则可能会阻止将 text-decoration 设置为 none。

【参考方案12】：

使用css属性，

text-decoration:none;

从链接中删除下划线。

【参考方案13】：

不要忘记使用链接标签包含样式表

http://www.w3schools.com/TAGS/tag_link.asp

或者将 CSS 包含在您网页上的样式标签中。

<style>
  a  text-decoration:none; 
  p  text-decoration:underline; 
</style>

我不建议在链接以外的任何内容上使用下划线，下划线通常被认为是可点击的东西。如果它不可点击，请不要加下划线。

可以在 w3schools 学习 CSS 基础知识

【参考方案14】：

<u>

是一个不推荐使用的标签。

使用...

<span class="underline">My text</span>

使用包含...的 CSS 文件

span.underline

    text-decoration: underline;
  

或者只是……

<span style="text-decoration:underline">My Text</span>

【参考方案15】：

下划线可以被称为文本装饰的 CSS 属性移除。

<style>
    a 
        text-decoration:none;
    
</style>

如果您想删除 a 以外的元素中存在的文本的下划线，则应使用以下语法。

<style>
    element-name
        text-decoration:none;
    
</style>

还有许多其他text-decoration 值可以帮助您设计链接。