css selects the nth tag

<div class="content">
    <span class="one"></span>
    <span class="two"></span>
    <span class="three"></span>
</div>

1. Select the first tab

.content {
    
    
    span:first-child {
    
    
        color: red;
    }
}

2. Select the last label

.content {
    
    
    span:last-child {
    
    
        color: red;
    }
}

3. Select the nth label

.content {
    
    
    span:nth-child(n) {
    
    
        color: red;
    }
}

4. Select the label from the 2nd to the end

.content {
    
    
    span:nth-child(n+2) {
    
    
        color: red;
    }
}

5. Select the first 3 tags

.content {
    
    
    span:nth-child(-n+3) {
    
    
        color: red;
    }
}

6. Select all tags except the last one

.content {
    
    
    span:not(:last-child) {
    
    
        color: red;
    }
}

7. Choose Even Tags

.content {
    
    
    span:nth-child(2n)) {
    
    
        color: red;
    }
}

8. Choose Odd Tags

.content {
    
    
    span:nth-child(2n-1)) {
    
    
        color: red;
    }
}

Guess you like

Origin blog.csdn.net/m0_53808238/article/details/130205631