CSS 此链接内链接和跨度的文本装饰
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8681301/
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
Text decoration for link and span inside this link
提问by wzazza
I have links like:
我有这样的链接：
<a href="#">Link text<span>Link sub-text</span></a>
When hovering I need that text inside span is not decorated with underline (but main link text is). Is it possible? I've tried:
悬停时，我需要跨度内的文本没有用下划线装饰（但主链接文本是）。是否可以？我试过了：
a:hover span {text-decoration:none;}
This is not working.
这是行不通的。
Is there any solution for this?
有什么解决办法吗？
回答by wzazza
Add link text (text you want to be decorated with underline) inside <span>and the sub-text outside as normal link text, like:<a href="#"><span>Link text</span>sub-text</a>
在内部添加链接文本（您想用下划线装饰<span>的文本），在外部添加子文本作为普通链接文本，例如：<a href="#"><span>Link text</span>sub-text</a>
To decorate Link text use:
要装饰链接文本，请使用：
a:hover {
text-decoration:none;
}
a:hover span {
text-decoration:underline;
}
回答by cPage
A simple solution is to use the colorand borderproperties, instead of text-decoration. You need to set text-decoration: nonefirst, and then use border-bottomas the underline for all your links.
一个简单的解决方案是使用color和border属性，而不是text-decoration。您需要先设置text-decoration: none，然后将border-bottom其用作所有链接的下划线。
style.css
样式文件
a, a:link, a:visited
{
color: #11bad3;
text-decoration: none;
border-bottom: 1px solid #11bad3;
}
a:hover, a:active
{
background: #00a9c2;
border-color: #00a9c2;
color: #fff;
}
print.css
打印文件
a, a:link, a:visited
{
border-bottom: 0px;
}
index.html
索引.html
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print">
回答by user2004478
I know this is an old post, but since I just had the same problem, and came up with a solution, I figured I would write it anyways.
我知道这是一个旧帖子，但由于我刚刚遇到了同样的问题，并想出了一个解决方案，我想我还是会写它。
Instead of trying using text-decoration: underline, instead just use border-bottom: 1px solid #000, this way, you can simply say border-bottom: none,
不要尝试使用 text-decoration: underline，而是使用 border-bottom: 1px solid #000，这样，您可以简单地说 border-bottom: none，
回答by kaleazy
Another solution is to use colors instead of underlines as your identifier:
另一种解决方案是使用颜色而不是下划线作为您的标识符：
<a id="outer-link" href="#">
Outer text <span id="inner-text">inner text</span> more outer text.
</a>
<style>
a { text-decoration: none; }
#outer-link:hover { color: green; }
#outer-link:hover #inner-text { color: red; }
</style>
