.test h3 a {background-color: #FF0000;}
</style>
<div class="test">
<H3><a href="#">abc</a> <a href="#">123</a></H3>
</div>
如上，在H3中有2个链接，想只对第一个链接A添加一个背景颜色，第二个链接无样式，应该怎么修改。
10 个解决方案
#1
<style type="text/css">
.test h3 a:first-child {background-color: #FF0000;}
</style>
<div class="test">
<H3><a href="#">abc</a> <a href="#">123</a></H3>
</div>
<style type="text/css">
.test h3 a.first {background-color: #FF0000;}
</style>
<div class="test">
<H3><a href="#" class="first">abc</a> <a href="#">123</a></H3>
</div>
#2
非常个感谢，顺便学习下，如果是选择第2个呢。
#3
还有:first-child和.first 分别是在什么时候用生效。谢谢
#4
CSS 选择器参考
选择第二个
一般给第二个加个class在定样式
选择第二个
<style type="text/css">
.test h3 a:nth-child(2) {background-color: #FF0000;}
</style>
<div class="test">
<H3><a href="#">abc</a> <a href="#">123</a></H3>
</div>
一般给第二个加个class在定样式
#5
如果有2个div嵌套，好像就没作用了，如：
<style type="text/css">
.test1.test2 h3 a:first-child {background-color: #FF0000;}
.test1_2.test2 h3 a:first-child {background-color: #EFEFEF;}
</style>
<div class="test1">
<div class="test2">
<H3><a href="#" name="1">abc</a> <a href="#" name="2">123</a></H3>
</div>
</div>
<div class="test1_2">
<div class="test2">
<H3><a href="#" name="1">abc</a> <a href="#" name="2">123</a></H3>
</div>
</div>
不好意思，问题太多。（因为这个是自动循环出来的列表，有2个DIV嵌套，外面的DIV会不同）
#6
<style type="text/css">
.test1 .test2 h3 a:first-child {background-color: #FF0000;}
.test1_2 .test2 h3 a:first-child {background-color: #EFEFEF;}
</style>
<div class="test1">
<div class="test2">
<H3><a href="#" name="1">abc</a> <a href="#" name="2">123</a></H3>
</div>
</div>
<div class="test1_2">
<div class="test2">
<H3><a href="#" name="1">abc</a> <a href="#" name="2">123</a></H3>
</div>
</div>
#7
解决问题，结贴，感谢。
#8
再问下，如果网页顶部不加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这个声明，有没办法实现上述功能。
发现之前做的东西加这个声明很多地方显示就错误了。
#9
不加也可以
#10
我测试的，不加没有效果，只有加了声明才有效果。
#1
<style type="text/css">
.test h3 a:first-child {background-color: #FF0000;}
</style>
<div class="test">
<H3><a href="#">abc</a> <a href="#">123</a></H3>
</div>
<style type="text/css">
.test h3 a.first {background-color: #FF0000;}
</style>
<div class="test">
<H3><a href="#" class="first">abc</a> <a href="#">123</a></H3>
</div>
#2
非常个感谢，顺便学习下，如果是选择第2个呢。
#3
还有:first-child和.first 分别是在什么时候用生效。谢谢
#4
CSS 选择器参考
选择第二个
一般给第二个加个class在定样式
选择第二个
<style type="text/css">
.test h3 a:nth-child(2) {background-color: #FF0000;}
</style>
<div class="test">
<H3><a href="#">abc</a> <a href="#">123</a></H3>
</div>
一般给第二个加个class在定样式
#5
如果有2个div嵌套，好像就没作用了，如：
<style type="text/css">
.test1.test2 h3 a:first-child {background-color: #FF0000;}
.test1_2.test2 h3 a:first-child {background-color: #EFEFEF;}
</style>
<div class="test1">
<div class="test2">
<H3><a href="#" name="1">abc</a> <a href="#" name="2">123</a></H3>
</div>
</div>
<div class="test1_2">
<div class="test2">
<H3><a href="#" name="1">abc</a> <a href="#" name="2">123</a></H3>
</div>
</div>
不好意思，问题太多。（因为这个是自动循环出来的列表，有2个DIV嵌套，外面的DIV会不同）
#6
<style type="text/css">
.test1 .test2 h3 a:first-child {background-color: #FF0000;}
.test1_2 .test2 h3 a:first-child {background-color: #EFEFEF;}
</style>
<div class="test1">
<div class="test2">
<H3><a href="#" name="1">abc</a> <a href="#" name="2">123</a></H3>
</div>
</div>
<div class="test1_2">
<div class="test2">
<H3><a href="#" name="1">abc</a> <a href="#" name="2">123</a></H3>
</div>
</div>
#7
解决问题，结贴，感谢。
#8
再问下，如果网页顶部不加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这个声明，有没办法实现上述功能。
发现之前做的东西加这个声明很多地方显示就错误了。
#9
不加也可以
#10
我测试的，不加没有效果，只有加了声明才有效果。