Eine Spannweite in einem Anker-Tag gestalten

Question

Ich versuche, das hübsch aussehen zu lassen, aber ich habe ein Problem. Ich habe ein span-Element mit einem Untertitel oder einer kurzen Beschreibung im Anker-Tag. Leider hat es den gleichen Stil wie der Anker, was ich nicht möchte. Ich habe versucht, Styling auf den Bereich selbst anzuwenden, aber sie scheinen von den Anker-Stilen überschrieben zu werden. Das Problem ist, dass ich nicht möchte, dass es unterstrichen wird, wenn die Verbindung über die Verbindung läuft.

Hier ist mein 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> 

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

Ich habe versucht, die Spanne selbst Styling, die keine Wirkung zu haben scheint. Das Platzieren der Spannweite außerhalb des Ankers relativ zum li funktioniert auch nicht. Der Bereich blockiert das Hover-Ereignis des Ankers und kann nicht angeklickt werden.

Answer 1

Ein Test Ihrer Beispielcode (Zugabe in einem geeigneten div mit id um es) scheint gut zu funktionieren:

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

Sein Standardstil wird natürlich die Genau wie der Anker, müssen Sie möglicherweise die Dinge wieder normalisieren. Sie müssen uns eine funktionierende (oder genauer gesagt eine nicht funktionierende) Probe zur Verfügung stellen, damit wir genau einschätzen können, wo Ihr Problem liegt.

Abschließend wenn die Dinge zu überprüfen sind:

1) Dass Ihre Wähler weisen auf jeden Fall auf die richtigen Elemente (zB in der oben hatte ich einen div mit der ID „leftNav“ enthalten, um die Wähler zu machen holen up

2) Dass Sie definitiv keine widersprüchlichen Stile haben - möglicherweise etwas mit höherer Priorität oder möglicherweise etwas mit einem! wichtig es zu überschreiben.

3) Verwenden Sie Firebug, um genau zu sehen, welche Stile angewendet werden, aus welchen CSS-Selektoren Sie erkennen, wo Ihre Probleme liegen.

Edit:

Im Falle des Unterstrichs es scheint, dass es unmöglich ist (oder zumindest nicht so, wie ich gefunden habe), um die ein Styling außer Kraft zu setzen. Anstatt also änderte ich das Markup um ein bisschen:

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

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

Mit dieser Auszeichnung können Sie Stile wie folgt festgelegt:

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

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

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

Das sagt im Grunde den Anker nicht Streichungen zu haben. Alle Bereiche müssen unterstrichen sein und der Untertitel darf keine Unterstreichungen enthalten. Sie müssen natürlich sicherstellen, dass alle Unterstreichungen in einem Bereich sind (alles, was nicht in einem Bereich ist, wird nicht unterstrichen).

Für was es wert ist sieht es aus wie ein Browser Fehler für mich, da IE scheint sich gut zu benehmen - http://jsfiddle.net/44ndf/5/ hat keine Unterstreichung auf die Untertitel auf IE, aber auf Firefox. Ich vermute, dass es etwas besonderes gibt, wenn die Unterstreichungen von Ankern nicht übersteuert werden.

Answer 2

Nicht sicher, was ist das Problem, weil ich nicht sehen kann, was Styling-Anchor-Tag haben, aber Sie können immer !important nach CSS-Regel versuchen. Etwas wie folgt aus:

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