CSS 从链接中删除顽固的下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2789703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove stubborn underline from link
提问by dmr
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.
我试图让链接以白色显示，没有下划线。文本颜色正确显示为白色，但蓝色下划线顽固地存在。我试图text-decoration: none;和text-decoration: none !important;在CSS删除链接的下划线。都没有工作。
.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?
如何从链接中删除蓝色下划线？
回答by Davor Lucic
As I expected, you are not applying text-decoration: none;to an anchor (.boxhead a) but to a span element (.boxhead).
正如我所料，您不是在应用text-decoration: none;锚点 ( .boxhead a)，而是应用到跨度元素 ( .boxhead)。
Try this:
尝试这个：
.boxhead a {
color: #FFFFFF;
text-decoration: none;
}
回答by JYelton
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.orgfor more information on user action pseudo-classes :hover, :active, and :focus.
有关用户操作伪类 :hover、:active 和 :focus 的更多信息，请参见W3.org 。
回答by Alex K.
text-decoration: none !importantshould remove it .. Are you sure there isn't a border-bottom: 1px solidlurking about? (Trace the computed style in Firebug/F12 in IE)
text-decoration: none !important应该删除它.. 你确定没有border-bottom: 1px solid潜伏吗？（在 IE 中跟踪 Firebug/F12 中的计算样式）
回答by Nagarajan S R
Just add this attribute to your anchor tag
只需将此属性添加到您的锚标记
style="text-decoration:none;"
style="text-decoration:none;"
Example:
例子：
<a href="page.html" style="text-decoration:none;"></a>
Or use the CSS way.
或者使用 CSS 方式。
.classname a {
color: #FFFFFF;
text-decoration: none;
}
回答by jeffmHyman
Sometimes what you're seeing is a box shadow, not a text underline.
有时您看到的是框阴影，而不是文本下划线。
Try this (using whatever CSS selectors are appropriate for you):
试试这个（使用任何适合你的 CSS 选择器）：
a:hover, a:visited, a:link, a:active {
text-decoration: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
回答by Santosh Khalse
You missed text-decoration:nonefor the anchor tag. So code should be following.
你错过 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>More standard properties for text-decoration
文本装饰的更多标准属性
回答by Joel Crawford-Smith
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:"
通常，如果您的“下划线”与您的文本颜色不同 [并且 'color:' 没有被内联覆盖] 它不是来自“text-decoration:”它必须是“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 its on an anchor, change to it's wrapper accordingly... and use specificity instead of "!important" after you track down the root cause.
这个片段假设它在一个锚点上，相应地改变它的包装器......并在你追踪根本原因后使用特异性而不是“！重要”。
回答by artlung
Without seeing the page, hard to speculate.
没有看到页面，很难推测。
But it sounds to me like you may have a border-bottom: 1px solid blue;being applied. Perhaps add border: none;. text-decoration: none !importantis right, it's possible that you have another style that is still overriding that CSS though.
但在我看来，您可能已经border-bottom: 1px solid blue;申请了。也许添加border: none;. text-decoration: none !important是的，您可能还有另一种样式仍然覆盖该 CSS。
This is where using the Firefox Web Developer Toolbaris awesome, you can edit the CSS right there and see if things work, at least for Firefox. It's under CSS > Edit CSS.
这就是使用Firefox Web Developer Toolbar很棒的地方，您可以在那里编辑 CSS 并查看是否有效，至少对于 Firefox。它在CSS > Edit CSS.
回答by yarz-tech
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!
这将从您页面上的每个链接中删除下划线！
回答by Deke
If text-decoration: noneor border: 0doesn't work, try applying inline style in your html.
如果text-decoration: none或border: 0不起作用，请尝试在您的 html 中应用内联样式。
