Consejo rápido Entender la especificidad de CSS

La "C" en CSS significa en cascada. Esto significa que las reglas de estilo que aparecen más adelante en la hoja de estilo anularán las reglas que aparecen antes. Pero este no es siempre el caso. Hay algo más que también hay que tener en cuenta: la especificidad. En este consejo rápido, te mostraré cómo hacer precisamente eso..

Reglas de especificidad

La especificidad de CSS es básicamente esto: cuanto más específico sea su selector, más precedencia tendrá. Para averiguar qué selectores valen más, use este sistema:

• Dale a cada elemento de HTML un punto 1. Ejemplo: p
• Dar a cada selector de clase 10 puntos.. Ejemplo: .column
• Dar a cada selector de id 100 puntos. Ejemplo: #wrap
• Sume los puntos de cada parte del selector para obtener el valor completo del selector.

Por ejemplo

 #test background: red;  / * especificidad: 100 * / .item p fondo: verde;  / * especificidad: 10 + 1 = 11 * / p fondo: naranja;  / * especificidad: 1 * / cuerpo # envoltura p fondo: amarillo;  / * especificidad: 1 + 100 + 1 = 102 * /