Question

我找到了与我相似的问题，但没有一条建议似乎适用于我的情况，所以这里有......

我有一个网页上有大量图片。每个图像都有一个标记，标记在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; }

完全忽略文本修饰规则，但尊重颜色规则。从其他问题我了解到这可能是因为一个子元素不能否决其任何父母的文本装饰。所以，我去寻找父元素，看看是否应用了任何明确的文本修饰规则。我找不到。

这让我发疯了，有什么帮助吗？

为了完整起见，这里是Firebug CSS输出，它显示了完整的继承等。可能比你想要的更多，但我看不出有任何冲突。

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

CSS文本修饰规则被忽略

2 个答案: