Comparación de la especificidad

Como ya habrás notado, la especificidad es fundamental para decidir qué estilos tienen prioridad. Vamos a practicar un poco más con ella.

Imagina que hay un gato en una caja sobre el piso:

<div id="floor">
  <span class="cat-in-box">Cupcake</span>
</div>

Supongamos que tenemos estas reglas CSS:

span {
  background-color: #27ae60; /* Verde */
}

div span {
  background-color: #2980b9; /* Azul */
}

#floor .cat-in-box {
  background-color: #34495e; /* Asfalto mojado */
}

.cat-in-box {
  background-color: #8e44ad; /* Violeta */
}

#floor span {
  background-color: #c0392b; /* Rojo */
}

div .cat-in-box {
  background-color: #e67e22; /* Naranja */
}

Ahora viene la pregunta: ¿de qué color será la caja? Primero intenta adivinarlo y después compruébalo.

En el siguiente ejercicio explicaremos por qué tiene ese color y cómo se determina.