There are 2 link elements in . Only CSS is attached to the first element and not the second one. How to write _html/css_WEB-ITnose

< div class="test">

abc 123

As above, there are 2 links in H3. I want to add a background color only to the first link A, and the second link has no style. How should it be modified?

Reply to discussion (solution)

<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>

<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>

Thank you very much, let me learn by the way, what if you choose the second one.

<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>

Also: when are first-child and .first respectively? Take effect. Thank you

CSS selector reference
Select the second one

<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>

Generally add a class to the second one to set the style

<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>

If there are 2 divs nested, it seems to have no effect, such as: