preface

The nTH-Child selector is often used in front-end programming. It can accept numbers, odd,even, etc. It can also accept an expression like 4n+1,-2n+1, etc. So what exactly does each of them do? What are the applicable scenarios? Maybe you are not very clear, let’s take a look at their HTML structure according to the example:

<body>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a>6</a>
</body>
Copy the code

NTH – child (even) and child (odd) NTH –

This is a variable that’s used a lot, and it’s an even variable and an odd variable

<style type="text/css">
    a:nth-child(even){/* Even fonts are red */
        color: red;
    }
    a:nth-child(odd){/* Odd font size is 30px*/
        font-size: 30px;
    }
</style>
Copy the code

Check the browser and find it is exactly as we expected, as follows:

nth-child(1)

Select a single element, the elements are matched according to the given value, counting from 1 should be the most common, as follows:

<style type="text/css">
    a:nth-child(3) {/* Select the third element for processing */
        color: red;
        font-size: 30px;
    }
</style>
Copy the code

The results were as we expected:

nth-child(2n+1)

This expression is less touching, how to deal with it? Nth-child (2n+1) : nth-child(2n+1) : nth-Child (2n+1) : nth-Child (2n+1) : nTH-Child (2n+1) : nTH-Child (2n+1) : nTH-Child N =1, 2, n+1=3, n=2, n+1=3, n=2, n+1=5, n=3, 2, n+1=7, n=1, 2,2, n+1=7

Sure enough, there’s only one, three, five

When n=1, -n+2=1 still exists. When n=0, -n+2=0 there is no end match. So the elements that work should be 1, 2 rows.



So we can use this to match the first few elements, and of course, depending on how you design the expression, you can match different elements.

Often confused with the above extension: nTH-of-type

:nth-of-type = nth-of-type = nth-of-type = nth-of-type This can be seen when page elements get too complex. Here’s how to change the HTML structure:

<body>
    <a>a1</a>
    <p>p1</p>
    <a>a2</a>
    <p>p2</p>
    <a>a3</a>
    <p>p3</p>
    <a>a4</a>
    <p>p4</p>
</body>
Copy the code

You can see that there is a p tag in there, so what happens when we add the following CSS styles?

<style type="text/css">
    a:nth-child(2) {color: red;
        font-size: 30px;
    }
</style>
Copy the code

I think a lot of people might say a2 gets red and big, but is it? Take a look at the results:

The result is no change. Why? Since a:nth-child(2) refers to both the tag of A and the second-ranking child of the parent, in our structure, the second-ranking child of the parent should be the label corresponding to P1. So how do we make A2 red and big? Nth-of-type (2) :nth-of-type(2) :nth-of-type(2) :nth-of-type(2) Let’s see if the results are what we want them to be.

<style type="text/css">
    a:nth-of-type(2) {color: red;
        font-size: 30px;
    }
</style>
Copy the code

That’s what we think.

summary

  1. First of all summed upnth-childIn the case of a numeric expression, n is counted from 0
  2. Introduces the confusingnth-of-type ， nth-of-typeIs the sort within the element of the specified type, whereas nth-Child is the sort between all elements

Thanks for reading!!