Select a specific element

1. :first-child

P :first-child{} selects each p element of the first child of its parent element

<div>
        <p>Red rice crispy shrimp sausage</p>
        <p>Stir-fried shrimp in typhoon shelter</p>
        <p>Pickled pepper shark skin</p>
        <p>Ageratum MeiWa</p>
        <p>Chop bell pepper bass</p>
</div>
Copy the code
/* Select red rice crispy shrimp sausage */
div>p:first-child{
    color: blueviolet;
}
Copy the code

2. :last-child

P :last-child{} selects each p element of the last child of its parent element

<div>
        <p>Red rice crispy shrimp sausage</p>
        <p>Stir-fried shrimp in typhoon shelter</p>
        <p>Pickled pepper shark skin</p>
        <p>Ageratum MeiWa</p>
        <p>Chop bell pepper bass</p>
</div>
Copy the code
/* Select minced pepper bass */
div>p:last-child{
    color: blueviolet;
}
Copy the code

(3) : the NTH – child (s) selectedThe parent elementThe NTH child of

  1. I’ll just put the numbers in parentheses

P :nth-child(3) Selects the p element of the third child of its parent element

<body>
    <p>one</p>
    <p>two</p>  
    <p>three</p>The selected<p>four</p>
    <p>five</p>
</body>
Copy the code
<section>
            <p>one</p> 
            <p>two</p> 
            <p>three</p>The selected<p>four</p>
            <p>five</p> 
    </section>
    <div>
            <p>six</p> 
            <p>seven</p> 
            <p>eight</p>The selected<p>nine</p>
            <p>ten</p> 
    </div>   
Copy the code
/* select the third */
p:nth-child(3) {color:yellowgreen;
}
Copy the code
  1. Put odd or even in parentheses
/* odd Selects the odd child */
p:nth-child(odd){
    color:yellowgreen;
}
/*even selects even child elements */
p:nth-child(even){
    color:rgb(205.151.50);
}
Copy the code
  1. I’ll put an plus b in parentheses, but a and b can’t both be 0
/* 2n is selected as a multiple of 2 */
p:nth-child(2n){
    color:rgb(144.84.194);
}
/* 3n+1 is selected as a multiple of 3 +1 */
p:nth-child(3n+1) {color:rgb(138.215.245);
}
Copy the code

4. :nth-of-type() selects the NTH child of the specified type element in the parent element

Ditto for the three methods

  1. I’ll just put the numbers in parentheses
<section>
        <h1>1</h1> 1
        <h2>1</h2>
        <h1>1</h1> 2
        <h1>1</h1>3 selected<h2>1</h2>
        <h2>1</h2>
        <h1>1</h1>
        <h1>1</h1>
</section>
Copy the code
/* Select the third child of the parent element h1 */
h1:nth-of-type(3) {color: blue;
}
Copy the code
  1. Put odd or even in parentheses
  2. I’ll put an plus b in parentheses, but a and b can’t both be 0

Two, a tag matching pseudo class

/* There is a priority order, which must be the following order */
/* This does not take effect when the href property value is null */
a:link{
    color:rgb(118.231.152);
}
/* Set access after */
a:visited{
    color: black;
}
/* Set mouse movement */
a:hover{
    color:yellow;
}
/* Sets access when clicked */
 a:active{
    color:red;
}
Copy the code
It’s for myself, and for you, it’s for watching

First day bald, clocked in!