Algo que desconocía sobre el CSS era la especificidad, la forma en que los browser interpretan como aplicar las propiedades CSS.

Su funcionamiento es muy sencillo, dando un valor a cada sentencia

• 0 – Selector universal *
• 1 – Los elementos (div, p, span, etc)
• 10 – Las clases (.clase1, .clase2)
• 100 – Los IDs  (#id1, #id2)
• 1000 – Los estilos directos en el atributo style (style=”color: red”)

Ejemplo:

#content p a {} /*(100 + 1 + 1 = 102)*/

Con este procedimiento es factible evitar el uso de !important, ya que este parámetro no es válido en todo los browsers. Sencillamente agregando un selector que nos haga aumentar la suma.

Ejemplo:

#content p a {} /* 102 */
#parrafo a {}/* 101 */

(Donde párrafo se encuentra dentro #content)

La clase que se aplica en este sigue siendo la primera, entonces para lograr que la segunda nos funcione:

#content #parrafo a {}
/* 201 */

Dándonos una suma mucho mayor a 102.