Reglas de especificidad en CSS

En el ejemplo anterior, ambos selectores eran iguales y tenían la misma prioridad. Esto significa que la propiedad que ganaba era la que estaba escrita más abajo.

También hay situaciones en las que un elemento de la página coincide con varios selectores. En este caso, cuando hay conflicto de propiedades, ganará el selector más específico, es decir, el más preciso. Veamos las reglas de especificidad.

Regla uno

Una clase siempre gana a un selector de etiqueta:

html<p class="text">text</p>

cssp {
  color: red;
}
.text {
  color: green; /* se aplicará este color */
}

Результат:

Regla dos

Un identificador siempre gana a una clase:

html<p id="elem" class="text">text</p>

css.text {
  color: red;
}
#elem {
  color: green; /* se aplicará este color */
}

Результат:

Regla tres

En condiciones iguales, gana el selector que tiene más partes. Por ejemplo, si tenemos dos selectores de etiquetas, ganará aquel que tenga más etiquetas:

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* se aplicará este color */
}

Результат:

Si son dos selectores de clases, ganará aquel en el que se especifiquen más clases (si hay selectores de etiquetas, estos no influyen):

html<div class="block">
  <p class="text">text</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* se aplicará este color */
}

Результат: