在锚标记内设置范围

Question

我试图让它看起来漂亮,但我遇到了一个问题.我有一个span元素,在anchor标记内包含一个Subtitle或简短描述.不幸的是,它的样式与锚点相同,这不是我想要的样子.我已经尝试将样式应用于跨度本身但它们似乎被锚样式覆盖.问题是当链接悬停时我不希望它被加下划线.

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

我已经尝试过设计跨度本身,这似乎没有任何影响.将跨度放置在锚之外,相对于li也不起作用.span阻止锚的悬停事件,并且不可点击.

Answer 1

对示例代码的测试（添加一个合适的 div 及其周围的 id）似乎工作正常：

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

它的默认样式当然与锚点相同，因此您可能需要将其覆盖恢复正常。您必须提供一个有效的（或更准确地说是无效的）示例，以便我们能够精确地缩小您的问题所在。

总之，需要检查的事项包括：

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

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

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

编辑：

在下划线的情况下，似乎不可能（或者至少我没有找到）覆盖样式。所以我稍微改变了标记：

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;  
}

这基本上告诉锚点不要有下划线。所有跨度都有下划线，然后您的字幕跨度没有下划线。您显然需要确保所有需要下划线的内容都在跨度中（任何不在跨度中的内容都不会带有下划线）。

对于我来说，它看起来像是一个浏览器错误，因为 IE 似乎表现良好 - http://jsfiddle.net/44ndf/5/在 IE 上的字幕上没有下划线，但在 Firefox 上却有。我怀疑锚点的下划线没有被覆盖有一些特别的地方。