css selecciona la enésima etiqueta

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

1. Seleccione la primera pestaña

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

2. Seleccione la última etiqueta

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

3. Seleccione la enésima etiqueta

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

4. Seleccione la etiqueta del 2 al final

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

5. Seleccione las primeras 3 etiquetas

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

6. Seleccione todas las etiquetas excepto la última

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

7. Elija etiquetas pares

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

8. Elija etiquetas impares

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

Supongo que te gusta

Origin blog.csdn.net/m0_53808238/article/details/130205631
Recomendado
Clasificación