¿Por qué mis reglas CSS son ignoradas?

El síntoma: El estilo aparece tachado

A veces el archivo carga bien y el selector es correcto, pero el navegador simplemente no aplica el color o tamaño que has definido. Si miras en el inspector, verás tu regla **tachada** con una línea horizontal.

Esto ocurre por la **Especificidad**: un sistema de puntos que el navegador usa para decidir qué regla "gana" cuando hay varias apuntando al mismo elemento.

Conflictos de CSS

La jerarquía del poder

No todos los selectores valen lo mismo. El navegador suma puntos siguiendo este orden de importancia:

  1. ID (#mi-id): Es el más fuerte.
  2. Clase (.mi-clase): Fuerza media.
  3. Etiqueta (p, div): La más débil.

El problema: Intentar cambiar un color con una clase cuando el elemento ya tiene un estilo definido por ID.

Arréglalo ahora

En este ejemplo, el texto debería ser **verde**, pero se ve rojo. El selector por ID está ganando a la clase. Modifica el CSS (imaginario) o el HTML para que la clase .texto-exito tenga prioridad.

<head>

<style>

  #mensaje-principal { color: red; }

  .texto-exito { color: green; }

</style>

</head>

<body>

<!-- El ID "mensaje-principal" anula a la clase "texto-exito" -->

<p id="mensaje-principal" class="texto-exito">

    Este texto debería ser verde.

</p>

</body>

Ejemplo: Conflicto de especificidad entre ID y Clase.

Tip:Siempre que puedas evita usar !important como solución rápida; lo ideal es usar selectores para alcnazar la especificidad adeucada que tu código sea mantenible.