<H>中有2个链接元素，只对第一个元素附加CSS，第二个不附加，怎么写_html/css_WEB-ITnose

abc  123

如上，在H3中有2个链接，想只对第一个链接A添加一个背景颜色，第二个链接无样式，应该怎么修改。

回复讨论(解决方案)

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><h3 id="a-nbsp-href-abc-a-nbsp-nbsp-a-nbsp-href-a"><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 id="a-nbsp-href-nbsp-class-first-abc-a-nbsp-nbsp-a-nbsp-href-a"><a href="#" class="first">abc</a>  <a href="#">123</a></h3></div>

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><h3 id="a-nbsp-href-abc-a-nbsp-nbsp-a-nbsp-href-a"><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 id="a-nbsp-href-nbsp-class-first-abc-a-nbsp-nbsp-a-nbsp-href-a"><a href="#" class="first">abc</a>  <a href="#">123</a></h3></div>

非常个感谢，顺便学习下，如果是选择第2个呢。

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><h3 id="a-nbsp-href-abc-a-nbsp-nbsp-a-nbsp-href-a"><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 id="a-nbsp-href-nbsp-class-first-abc-a-nbsp-nbsp-a-nbsp-href-a"><a href="#" class="first">abc</a>  <a href="#">123</a></h3></div>

还有:first-child和.first 分别是在什么时候用生效。谢谢

CSS 选择器参考
选择第二个

<style type="text/css">.test h3 a:nth-child(2) {background-color: #FF0000;}</style>  <div class="test"><h3 id="a-nbsp-href-abc-a-nbsp-nbsp-a-nbsp-href-a"><a href="#">abc</a>  <a href="#">123</a></h3></div>

一般给第二个加个class在定样式

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><h3 id="a-nbsp-href-abc-a-nbsp-nbsp-a-nbsp-href-a"><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 id="a-nbsp-href-nbsp-class-first-abc-a-nbsp-nbsp-a-nbsp-href-a"><a href="#" class="first">abc</a>  <a href="#">123</a></h3></div>

如果有2个div嵌套，好像就没作用了，如：

abc  123

abc  123

不好意思，问题太多。（因为这个是自动循环出来的列表，有2个DIV嵌套，外面的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 id="a-nbsp-href-nbsp-name-abc-a-nbsp-nbsp-a-nbsp-href-nbsp-name-a"><a href="#" name="1">abc</a>  <a href="#" name="2">123</a></h3></div></div><div class="test1_2"><div class="test2"><h3 id="a-nbsp-href-nbsp-name-abc-a-nbsp-nbsp-a-nbsp-href-nbsp-name-a"><a href="#" name="1">abc</a>  <a href="#" name="2">123</a></h3></div></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 id="a-nbsp-href-nbsp-name-abc-a-nbsp-nbsp-a-nbsp-href-nbsp-name-a"><a href="#" name="1">abc</a>  <a href="#" name="2">123</a></h3></div></div><div class="test1_2"><div class="test2"><h3 id="a-nbsp-href-nbsp-name-abc-a-nbsp-nbsp-a-nbsp-href-nbsp-name-a"><a href="#" name="1">abc</a>  <a href="#" name="2">123</a></h3></div></div>

解决问题，结贴，感谢。