- : First-child looks for the first child element of the parent element, sorted in all child elements;
- : Last-child looks for the last child element of the parent element, sorted in all child elements;
- : Nth-child the child elements of the specified position in the parent element, sorted in all child elements;
- : First-of-type looking for the first child element in a specified type
- : Last-of-type finds the last child element in a specified type
- : Nth-of-type to find the specified child element in the specified type
You can use even to find even-numbered child elements.
You can use odd to find odd sub-elements
Demo
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css"> /*: First-child looks for the first child element of the parent element, sorted in all child elements;*/P:first-child{Color:#ADFF2F; } /*: Last-child looks for the last child element of the parent element, sorted in all child elements;*/P:last-child{Color:#008000; } /*: Nth-child The child elements of the specified position in the parent element, sorted in all child elements;*/P:nth-child (3){Color:#FFFFFF;Background-color:#000000; } /*: First-of-type Looking for the first child element in a specified type*/H3:first-of-type{Color:Red; } /*: Last-of-type finds the last child element in a specified type*/H3:last-of-type{Color:Green; } /*: Nth-of-type to find the specified child element in the specified type*/H3:nth-last-of-type (2){Color:Yellow; } /*you can use even to find even-numbered child elements that can use odd to find odd-numbered child elements*/H4:nth-last-of-type (even){Color:Red; }H4:nth-last-of-type (Odd){Color:Green; } </style> </Head> <Body> <P>Sometimes concerns are asked, and sometimes concerns are not asked.</P> <H3>----I'm a split line 1----</H3> <P>So undisturbed, hello and me.</P> <H3>----I'm a split line 2----</H3> <P>Mountain or mountain, water or water, life and work will be as usual.</P> <H3>----I'm a split line 3----</H3> <P>Hope that the change of ideas can stay longer: to the people of Heaven, believe in the heart</P> <H3>----I'm a split line 4----</H3> <BR/> <BR/> <BR/> <h4>Water</h4> <h4>Your eye area must be smaller than the lake.</h4> <h4>And you seldom cry.</h4> <h4>Why are you sitting in front of you?</h4> <h4>It's like standing on the edge of a lake</h4> <h4>The thin fog on the ground</h4> </Body></HTML>
:
Front-end learning--css--pseudo-class of child elements