Html 在锚标记内设置跨度样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3364610/
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
Styling a span inside an anchor tag
提问by Bocochoco
I'm trying to make this look pretty, but I've run into a problem. I have a span element containing a Subtitle or short description inside the anchor tag. Unfortunately it's styled the same way as the anchor, which is not how I want it to be. I've tried applying styling to the span itself but they seem to be overridden by the anchor styles. The problem is that I don't want it to be underlined when the link is hovered over.
我试图让这看起来很漂亮，但我遇到了一个问题。我有一个 span 元素，在锚标签内包含一个副标题或简短描述。不幸的是，它的样式与锚点相同，这不是我想要的。我已经尝试将样式应用于跨度本身，但它们似乎被锚点样式覆盖。问题是当链接悬停在上面时，我不希望它带有下划线。
Here's my html.
这是我的 html。
<ul>
<li><a href="#">A <span class="subTitle">Subtitle</span></a></li>
<li><a href="#">B <span class="subTitle">Subtitle</span></a></li>
<li><a href="#">C <span class="subTitle">Subtitle</span></a></li>
<li><a href="#">D <span class="subTitle">Subtitle</span></a></li>
<li><a href="#">E <span class="subTitle">Subtitle</span></a></li>
</ul>
And my CSS
还有我的 CSS
#leftNav ul li { position: relative; }
#leftNav ul li a span.subTitle
{
bottom: 4px;
color: #000000;
display: block;
font-size: 12px;
left: 10px;
position: absolute;
text-decoration: none;
}
I've tried styling the span itself, which doesn't seem to have any effect. Placing the span outside the anchor, relative to the li doesn't work either. the span blocks the hover event of the anchor and it isn't clickable.
我试过对跨度本身进行样式设置，这似乎没有任何效果。将跨度放置在锚点之外，相对于 li 也不起作用。span 会阻止锚点的悬停事件，并且它不可点击。
采纳答案by Chris
A test of your sample code (adding in a suitable div with id around it) seems to work fine:
对您的示例代码的测试（添加一个带有 id 的合适 div）似乎工作正常：
Its default styling will of course be the same as the anchor so you will potentially need to override things back to normal. You'll have to provide a working (or more accurately a not working) sample for us to be able to precisely narrow down where your problem lies.
它的默认样式当然与锚点相同，因此您可能需要将事情覆盖恢复正常。您必须提供一个有效的（或更准确地说是无效的）样本，以便我们能够精确地缩小您的问题所在的范围。
In conclusion though things to check include:
总之，要检查的事项包括：
1) That your selectors are definitely pointing to the correct elements (eg in the above I had to include a div with id "leftNav" to make the selector pick it up
1）您的选择器肯定指向正确的元素（例如，在上面我必须包含一个 id 为“leftNav”的 div 以使选择器选择它
2) That you defintiely don't have conflicting styles - possibly something with higher precedence or possibly something with a !important overriding it.
2）你绝对没有冲突的风格 - 可能是具有更高优先级的东西，或者可能是带有 !important 覆盖它的东西。
3) Use Firebug to see exactly which styles are being applied from which CSS selectors to identify where your problems lie.
3) 使用 Firebug 准确查看从哪些 CSS 选择器应用了哪些样式，以确定您的问题所在。
Edit:
编辑：
In the case of the underline it seems that it is impossible (or at least no way I've found) to override the a styling. So instead I changed the markup around a bit:
在下划线的情况下，似乎不可能（或至少我找不到）覆盖 a 样式。因此，我稍微更改了标记：
<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a>
With this markup you can set styles as follows:
使用此标记，您可以按如下方式设置样式：
#leftNav ul li a span.subTitle
{
text-decoration: none;
}
#leftNav ul li a span
{
text-decoration: underline;
}
#leftNav ul li a
{
text-decoration: none;
}
This basically tells the anchor not to have underlines. All spans to have underlines and then your subtitle span not to have underlines. You will need to obviously make sure that everythign that wants underlining is in a span (anything not in a span won't be underlined).
这基本上告诉锚点不要有下划线。所有跨度都有下划线，然后你的副标题跨度没有下划线。您显然需要确保需要下划线的所有内容都在一个跨度中（任何不在跨度中的都不会被下划线）。
For what its worth it looks like a browser bug to me since IE seems to behave well - http://jsfiddle.net/44ndf/5/has no underline on the subtitles on IE but does on firefox. I suspect there is somethign special abotu the underlines from anchors not being overridden.
就其价值而言，它对我来说似乎是一个浏览器错误，因为 IE 似乎表现良好 - http://jsfiddle.net/44ndf/5/在 IE 上的字幕上没有下划线，但在 Firefox 上有下划线。我怀疑有一些特殊的 abotu 来自锚点的下划线未被覆盖。
回答by Gavrisimo
Not sure what is the problem because i cant see what styling anchor tag have, but you can always try !importantafter css rule. Something like this:
不确定是什么问题，因为我看不到锚标记的样式，但是您可以随时尝试使用!importantcss 规则。像这样的东西：
#leftNav ul li a span.subTitle
{
bottom: 4px;
display: block;
font-size: 12px !important;
left: 10px;
position: absolute;
}
