Home > Web Front-end > HTML Tutorial > 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

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

WBOY

Release： 2016-06-24 11:54:31

Original

1043 people have browsed it

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

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>

Copy after login

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

Copy after login

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