造型锚定标签内的跨度

Question

我试图让这看起来很漂亮，但我遇到了问题。我有一个span标签中包含一个副标题或简短描述的元素。不幸的是，它的风格与锚点相同，这不是我想要的。我尝试将样式应用于跨度本身，但它们似乎被锚样式覆盖。问题是，我不希望它在链接悬停时加下划线。

这是我的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也不起作用。跨度会阻止锚点的悬停事件并且不可点击。

Answer 1

的示例代码（与它周围的id合适的DIV增加）的测试，似乎很好地工作：

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

它的默认样式当然是与锚点相同，因此您可能需要将事件重写为正常。你必须为我们提供一个工作（或者更准确地说不是工作）的样本，以便能够精确地缩小问题所在。

总之，虽然检查事项包括：

1）那你的选择肯定是指向正确的元素（例如，在上面我必须包括ID为“leftNav”一个div做出选择捡起来up）

2）你确实没有冲突的样式 - 可能是具有更高优先级的东西，或可能是某个重要的东西重写它。

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

这基本上告诉锚不要有下划线。所有跨度都有下划线，然后您的字幕跨度不会有下划线。您需要明确确定要强调的每个符号都在一个范围内（任何不在范围内的都不会加下划线）。

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

Answer 2

不知道是什么问题，因为我不能看到什么样式的锚标记，但你总是可以在css规则后尝试!important。事情是这样的：

#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    display:   block; 
    font-size:  12px !important; 
    left:   10px; 
    position:  absolute; 
}