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

080b747a20f9163200dd0a7d304ba388
.test h3 a {background-color: #FF0000;}
531ac245ce3e4fe3d50054a55f265927


8672f64d388dd81df27260b4e858ab0d
9d67e4fe87d770f037d88ca428ebdeceee7959cc8dd4be16ef633321c03dac32abc5db79b134e9f6b82c0b36e0489ee08ed ee7959cc8dd4be16ef633321c03dac321235db79b134e9f6b82c0b36e0489ee08ed036fe202a55b5e84ed42b72960fef91d
16b28748ea4df4d9c2150843fecfba68



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:

769cbb542039d9a75a430d05b5cfa3b6
.test1.test2 h3 a:first-child {background-color: #FF0000;}
.test1_2.test2 h3 a:first-child {background-color: #EFEFEF;}
< ;/style>


28433d9908fab58e24e5fef077345b62
48e30d1888c19161e801f83a47bac733
9d67e4fe87d770f037d88ca428ebdece98729a3f014736886bd598f2fd2f3c78abc5db79b134e9f6b82c0b36e0489ee08ed f0e5186af014e8be5b0b710c674a05ef1235db79b134e9f6b82c0b36e0489ee08ed036fe202a55b5e84ed42b72960fef91d
16b28748ea4df4d9c2150843fecfba68
< ;/div>

59027b8837e0f0deb1dfc88b9024737f
48e30d1888c19161e801f83a47bac733
9d67e4fe87d770f037d88ca428ebdece8e1bb509d10d7aff5b8716ab557214bdabc5db79b134e9f6b82c0b36e0489ee08ed f0e5186af014e8be5b0b710c674a05ef1235db79b134e9f6b82c0b36e0489ee08ed036fe202a55b5e84ed42b72960fef91d
16b28748ea4df4d9c2150843fecfba68

Sorry, too many questions. (Because this is an automatically looped list, there are 2 DIVs nested, and the outer DIVs will be different)

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

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

Solve the problem, thank you for posting.