CSS правило текста украшения игнорируются

Question

я нашел подобные вопросы шахты, но ни одно из предложений не кажется, относится к моей ситуации, так что здесь идет ...

У меня есть веб-страницу с Buch изображений на них. Каждое изображение имеет заголовок, который в разметке находится между тегами h2. Название является ссылкой, таким образом, в результате разметки, как это:

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

Все, что я хочу для названия ссылки на не быть подчеркнуты. Я попытался решить эту проблему следующим образом:

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

Он полностью игнорирует правило текста украшения, но уважает правила цвета. Из других вопросов я узнал, что это может быть связано с тем, что дочерний элемент не может отменить текстовое оформление любого из его родителей. Итак, я пошел искать родительские элементы, чтобы увидеть, применяются ли какие-либо четкие правила оформления текста. Я не нашел никого.

Это сводит меня с ума, любая помощь?

Для полноты, вот вывод CSS Firebug, который показывает полное наследование и т. Д. Наверное, больше, чем вы хотите, но я не вижу здесь ничего противоречивого.

.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

Попробуйте это:

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

Answer 2

Попробуйте переключить свой HTML о немного, в то время как HTML 5 позволяет элементы уровня блока в пределах a тегов, я не уверен, что HTML 4.01 или XHTML делает, так что может быть стоит:

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

И с помощью CSS:

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

Или, в случае специфичности, являющейся проблемой:

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