css选择第 n 个标签

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

1、选择第 1 个标签

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

2、选择最后 1 个标签

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

3、选择第 n 个标签

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

4、选择从第 2 位开始到结尾的标签

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

5、选择前 3 个标签

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

6、选择除最后一个之外的所有标签

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

7、选择偶数标签

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

8、选择奇数标签

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