CSS règle text-decoration ignoré

Question

j'ai trouvé des questions similaires à la mienne, mais aucune des suggestions semble appliquer à ma situation, donc voilà ...

J'ai une page Web avec un buch d'images sur eux. Chaque image a un titre qui est en balisage entre les balises h2. Le titre est un lien, de sorte que le balisage qui en résulte est comme ceci:

<ul class="imagelist"> 
<li> 
<a href=""><h2>Title 1</h2></a> 
<a href=""><img src="" /></a> 
</li> 
<li> 
Image 2, etc... 
</li> 
</ul> 

Tout ce que je veux est pour les liens de titre à pas être soulignés. J'ai essayé de résoudre ce comme ceci:

.imagelist li a h2 { color:#333; text-decoration:none; } 

Il ignore complètement la règle de décoration de texte, respecte encore la règle de couleur. D'autres questions, j'ai appris que cela pourrait être parce qu'un élément enfant ne peut pas annuler la décoration de texte de l'un de ses parents. Donc, je suis allé chercher les éléments parents pour voir si des règles explicites de text-decoration sont appliquées. Je n'en ai trouvé aucun.

Cela me rend fou, toute aide? Par souci d'exhaustivité, voici la sortie CSS Firebug, qui montre l'héritage complet et ainsi de suite. Probablement plus que ce que vous voulez, mais je ne vois rien de contradictoire ici.

.imagelist li a h2 { 
color:#333333; 
text-decoration:none; 
} 
main.css (line 417) 
h2 { 
font-size:14px; 
} 
main.css (line 40) 
h1, h2, h3, h4, h5, h6 { 
display:block; 
font-weight:bold; 
margin-bottom:10px; 
} 
main.css (line 38) 
h1, h2, h3, h4, h5, h6 { 
font-size:100%; 
font-weight:normal; 
} 
reset-min.css (line 7) 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { 
margin:0; 
padding:0; 
} 
reset-min.css (line 7) 
Inherited froma /apps/ju...mage/745 
a { 
color:#0063E2; 
} 
main.css (line 55) 
Inherited fromli 
.imagelist li { 
list-style-type:none; 
} 
main.css (line 411) 
li { 
list-style:none outside none; 
} 
reset-min.css (line 7) 
Inherited fromul.imagelist 
.imagelist { 
border-collapse:collapse; 
font-size:9px; 
} 
main.css (line 410) 
Inherited frombody 
body, form { 
color:#333333; 
font:12px arial,helvetica,clean,sans-serif; 
} 
main.css (line 36) 
Inherited fromhtml 
html { 
color:#000000; 

Answer 1

Essayez ceci:

.imagelist li a, .imagelist li a:hover{color:#333; text-decoration:none;} 

Answer 2

Essayez de changer votre code html d'un peu, alors que HTML 5 permet aux éléments de niveau de bloc à l'intérieur a balises, je ne suis pas sûr que le HTML 4.01 ou xhtml fait, il pourrait être utile:

... 
<li><h2><a href="#">title 1</a></h2></li> 
... 

Et en utilisant le code CSS:

a:link, 
a:visited {text-decoration: none; } 

Ou, en cas de spécificité étant le problème:

ul.imagelist li h2 a:link, 
ul.imagelist li h2 a:visited {text-decoration: none; }