logo标签列表

如何去掉链接下划线？

htmlcss
3

我在每个显示图片或文字的地方都出现了一个奇怪的问题，它们会出现在下面……

我已经将CSS设置为外部事件和内部事件，就像这样：

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

这个问题出现在Safari10、Mozilla 8和Google Chrome中。

非常感谢您的帮助，如果此前已有人问过此问题，我深表歉意。

3
在Chrome的检查器中查看是否有更具体的样式（例如.mydiv a{}）占据优先权。 - Ben Swinburne
3个回答
11

你试过这个了吗？

a {
    text-decoration: none; 
}
这是实现相同结果的快捷方式。我的答案以原帖提出的方式分别应用规则的正确方法。因此，如果有人遇到相同的问题，但需要每个规则的不同样式，我的答案展示了正确的做法。 - Sherwin Flight
1
如果用户想在伪类上实现完全不同的结果，我认为你的答案是正确的。但是我认为像我的答案这样的基本样式是更好的做法。因此，用户只需定义与基本样式的差异即可。这必须按照您的顺序进行。 - rekire
4

试试这个：

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

我认为它们需要按照这个顺序排列。 < p > < em > 请阅读评论。这是对原问题的正确答案。< /em > < /p >
请注意，必须将a:hover规则放置在a:link和a:visited规则之后，否则层叠规则将隐藏a:hover规则的效果。同样地，因为a:active放置在a:hover之后，所以当用户同时激活和悬停在“锚点”元素上时，活动颜色将应用。请参考http://www.quackit.com/css/css_hyperlinks.cfm。 - Sherwin Flight
1
无论如何，在查找信息之前，不要认为我的答案应该被投票否决。我会假设，既然我发现许多网站都说同样的话，那么规则顺序肯定有所不同。 - Sherwin Flight
请注意：在CSS定义中，a:hover必须放在a:link和a:visited之后才能生效！请注意：在CSS定义中，a:active必须放在a:hover之后才能生效！同时，在这里也可以查看更多信息：http://www.w3schools.com/css/css_pseudo_classes.asp - Sherwin Flight
1
我知道有时候我发问题的时候会把它们简化，以便更容易理解。我相信最初的问题是为什么那四个规则按照那个顺序排列不起作用。原因是因为顺序是错误的，根据官方文档。全合一快捷方式只是一个快捷方式，但它并不能回答如何单独应用这四个规则的问题。因此，虽然当它们都相同时可能无关紧要，但并非每个阅读此页面的人都处于同样的情况，他们可能想知道正确的应用这些规则的方法。 - Sherwin Flight
1
公正投票：回答者显然进行了一些研究并提供了证据。@SherwinFlight不要责怪社区，要责怪那些人。 - ereOn
显示剩余4条评论
1

你可以轻松地使用 CSS 属性 text-decoration 将下划线去除，只需为链接的不同状态设置为 none。

示例：

<html>
    <head>
        <style type="text/css">
            a:link {text-decoration: none;}    /* unvisited link */
            a:visited {text-decoration: none;} /* visited link */
            a:hover {text-decoration: none;}   /* mouse over link */
            a:active {text-decoration: none;}  /* selected link */
        </style>
    </head>
    <body>
        <a href="https://www.google.com" target="_blank">Link without underline</a>
    </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接