html - 在 anchor 标记内设置跨度样式

Question

我正在努力使它看起来漂亮，但我遇到了一个问题。我有一个 span 元素，其中包含 anchor 标记内的副标题或简短描述。不幸的是，它的样式与 anchor 相同，这不是我想要的。我试过将样式应用于跨度本身，但它们似乎被 anchor 样式覆盖了。问题是当链接悬停时，我不希望它被加下划线。

这是我的 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>

还有我的 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;
}

我已经尝试对 span 本身进行样式设置，但似乎没有任何效果。将 span 放在 anchor 之外，相对于 li 也不起作用。跨度会阻止 anchor 的悬停事件，并且不可点击。

Answer 1

对您的示例代码进行的测试(添加一个合适的带有 id 的 div)似乎工作正常:

http://jsfiddle.net/44ndf/1/

它的默认样式当然会与 anchor 相同，因此您可能需要将其重写为正常。您必须提供一个有效(或更准确地说是无效)示例，以便我们能够精确缩小您的问题所在。

总而言之，要检查的事项包括:

1) 您的选择器肯定指向了正确的元素(例如，在上面我必须包含一个 id 为“leftNav”的 div 以使选择器选择它

2) 你绝对没有冲突的风格 - 可能有更高优先级的东西或者可能有 !important 覆盖它的东西。

3) 使用 Firebug 准确查看从哪些 CSS 选择器应用了哪些样式，以确定您的问题所在。

编辑:

在下划线的情况下，似乎不可能(或者至少我找不到)覆盖 a 样式。因此，我稍微更改了标记:

http://jsfiddle.net/44ndf/2/

<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a>

使用此标记，您可以按如下方式设置样式:

#leftNav ul li a span.subTitle
{
    text-decoration: none;
}

#leftNav ul li a span
{
 text-decoration: underline;   
}

#leftNav ul li a
{
 text-decoration: none;  
}

这基本上告诉 anchor 不要有下划线。所有跨度都有下划线，然后你的字幕跨度没有下划线。您显然需要确保所有需要加下划线的内容都在一个范围内(任何不在范围内的内容都不会被加下划线)。

对于它的值(value)，它对我来说看起来像是一个浏览器错误，因为 IE 似乎表现良好 - http://jsfiddle.net/44ndf/5/在 IE 上的字幕上没有下划线，但在 Firefox 上有。我怀疑 anchor 的下划线没有被覆盖是有什么特别之处。