Precedencia de CSS: por qué se anulan los estilos en línea

En CSS, los estilos se aplican a los elementos según la precedencia de sus reglas. Cuando varias reglas apuntan al mismo elemento, la que tenga mayor prioridad entrará en vigor.

En el ejemplo proporcionado, tiene un estilo en línea que establece padding-left: 10px para elementos td dentro de una tabla con la columna derecha IDENTIFICACIÓN. Sin embargo, un estilo de una hoja de estilo a la que se hace referencia establece el margen y el relleno en 0 para todos los elementos dentro de la clase .rightColumn. El problema es que los estilos de la hoja de estilos a la que se hace referencia tienen mayor prioridad, lo que hace que los estilos en línea se anulen.

Cálculo de la especificidad

La precedencia de CSS está determinada por la especificidad de normas. La especificidad se calcula en función de los siguientes criterios:

1. Las declaraciones de estilo en línea contribuyen con 1 punto a la especificidad (a = 1).
2. Cada ID en el selector contribuye con 10 puntos (b = n ).
3. Cada clase o pseudoclase en el selector aporta 1 punto (c = n).
4. Cada elemento o pseudoelemento en el selector aporta 1 punto (d = n).

Por ejemplo, una regla con el selector .rightColumn * tiene una especificidad de 0010 (a = 0, b = 0, c = 1, d = 0), mientras que una regla con el selector td tiene una especificidad de 0001 (a = 0, b = 0, c = 0, d = 1). Dado que 0010 es mayor que 0001, la regla de la hoja de estilo a la que se hace referencia tiene mayor prioridad.

Resolviendo el problema

Para resolver este problema y aplicar los estilos en línea, tienes dos opciones:

1. Usar !important: Puedes agregar !important al estilo en línea para forzar su mayor importancia. Sin embargo, este enfoque puede ser difícil de mantener y debe evitarse si es posible.
2. Aumentar la especificidad de las reglas: Puede agregar un selector más específico al estilo en línea para aumentar su especificidad. Por ejemplo, puede agregar un nombre de clase a las celdas de la tabla y aplicarles estilo usando un selector como .rightColumn .myUnpaddedTable. De esta manera, la especificidad del estilo en línea pasa a ser 0011, que es mayor que la especificidad de la regla de la hoja de estilo a la que se hace referencia (0010).