造型錨定標籤內的跨度

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