Styling a span dans une balise d'ancrage

Question

J'essaie de rendre cela joli, mais j'ai rencontré un problème. J'ai un élément span contenant un sous-titre ou une courte description à l'intérieur de l'étiquette d'ancrage. Malheureusement, il est stylé de la même manière que l'ancre, ce qui n'est pas ce que je veux. J'ai essayé d'appliquer le style à la portée elle-même, mais ils semblent être remplacés par les styles d'ancrage. Le problème est que je ne veux pas qu'il soit souligné lorsque le lien est survolé.

Voici mon code 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> 

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

J'ai essayé styling la durée elle-même, qui ne semble pas avoir d'effet. Placer la travée à l'extérieur de l'ancre, par rapport à la li ne fonctionne pas non plus. l'intervalle bloque l'événement de survol de l'ancre et il n'est pas cliquable.

Answer 1

Un test de votre exemple de code (ajoutant dans un div approprié avec id autour) semble fonctionner très bien:

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

Son style par défaut sera bien sûr la Identique à l'ancre, vous devrez donc potentiellement remplacer les choses à la normale. Vous devrez fournir un échantillon de travail (ou plus exactement un ne fonctionne pas) pour que nous soyons en mesure d'affiner précisément votre problème.

En conclusion si les choses à vérifier comprennent:

1) Que vos sélecteurs sont certainement pointent vers les bons éléments (par exemple, dans ce qui précède, je devais inclure un div id « leftNav » pour faire le sélecteur choisir ce

2) Que vous n'avez certainement pas de styles contradictoires - peut-être quelque chose avec une priorité plus élevée ou éventuellement quelque chose avec un important!

3) Utilisez Firebug pour voir exactement quels styles sont appliqués à partir des sélecteurs CSS pour identifier vos problèmes.

Edit:

Dans le cas du soulignement il semble qu'il est impossible (ou du moins pas comme je l'ai trouvé) pour remplacer le dénommer. Ainsi, au lieu que j'ai changé le balisage autour d'un peu:

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

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

Avec cette balise, vous pouvez définir des styles comme suit:

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

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

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

Cela dit essentiellement l'ancre de ne pas avoir soulignements. Toutes les portées à souligner, puis votre sous-titre ne doit pas avoir de soulignement. Vous devrez évidemment vous assurer que tout ce qui veut être souligné est dans une durée (tout ce qui n'est pas dans une durée ne sera pas souligné).Pour ce que ça vaut, il ressemble à un bug de navigateur pour moi depuis IE semble bien se comporter - http://jsfiddle.net/44ndf/5/ n'a pas souligné sur les sous-titres sur IE, mais sur firefox. Je soupçonne qu'il y a quelque chose de spécial abotu les soulignements des ancres ne sont pas écrasés.

Answer 2

Je ne sais pas quel est le problème parce que je ne vois pas ce que l'étiquette d'ancrage de style ont, mais vous pouvez toujours essayer !important après la règle CSS. Quelque chose comme ceci:

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