Especificidad en CSS

La especificidad en CSS es una regla que determina qué estilo se aplicará cuando varios selectores coinciden con el mismo elemento. CSS asigna diferentes niveles de importancia a los selectores en función de su tipo, y el estilo con mayor especificidad se aplicará al elemento.

La especificidad se calcula en función de la estructura del selector. Los tipos de selectores tienen diferentes “pesos”:

Los selectores de elementos (p, div, h1) tienen menor peso.
Los selectores de clase, atributos o pseudoclases (.clase, [attr=valor], :hover) tienen un peso medio.
Los selectores de ID (#id) tienen un peso mayor.
Los estilos en línea (directamente en el atributo style de un elemento) tienen el mayor peso.
La declaración !important sobrescribe otros estilos (excepto si ambos estilos tienen !important, en cuyo caso se compara la especificidad).

Ejemplos:

Selectores de Elemento
```
p {
  color: blue;
}
```
Esto aplicará a todos los elementos <p> tiene la menor especificidad (número de la derecha).
Selectores de Clase
```
.myClass {
  color: red;
}
```
Tiene mayor especificidad que un selector de elemento y se aplicará a cualquier elemento con la clase myClass (número del centro).
Selectores de ID
```
#myId {
  color: green;
}
```
Es más específico que los selectores de clase o de elemento y se aplicará a cualquier elemento con el ID myId (número de la izquierda).
Especificidad combinada
```
div p.myClass {
  color: purple;
}
```
La especificidad aquí es más alta porque es un selector combinado: se aplica solo a los párrafos dentro de un div con la clase myClass.
Estilo en línea
```
<p style="color: orange;">Estilo en línea</p>
```
Tiene la mayor especificidad y se aplicará a ese párrafo en particular.

Orden de especificidad (de menor a mayor):

Selectores de tipo o elemento (Ejemplo: div, p, h1) → (0,0,1)
Selectores de clase, atributos y pseudoclases (Ejemplo: .clase, [type="text"], :hover) → (0,1,0)
Selectores de ID (Ejemplo: #miId) → (1,0,0)
Estilos en línea (Ejemplo: <div style="color: red;">) → (1,0,0,0) (Máxima prioridad en CSS)
Regla !important → No cuenta en la especificidad, pero sobrescribe todo excepto otro !important con mayor especificidad.

Ejemplos de comparación (de menor a mayor):

Selector	Especificidad
`div`	(0,0,1)
`.clase`	(0,1,0)
`#id`	(1,0,0)
`div#id`	(1,0,1)
`div.clase`	(0,1,1)
`#id .clase`	(1,1,0)
`style="color: red;"`	(1,0,0,0)

¿Cuál tiene más especificidad?

ID (#id) tiene más especificidad que clase (.clase) y que un elemento (div).
Reglas con múltiples selectores se suman (por ejemplo, #id .clase es más fuerte que solo #id o solo .clase).
Un style="..." en línea siempre tendrá prioridad sobre selectores en hojas CSS externas (salvo por !important).

¿Cómo vencer la especificidad?

Evitar usar IDs en CSS si se puede (mejor usar clases para mantener el código más flexible).
Usar !important con cuidado, ya que puede hacer difícil depurar estilos.
Usar selectores más específicos si es necesario (.clase div en lugar de solo div).

Ejemplo práctico:

HTML

<p class="hola" id="adios" style="color: pink; font-size: 3em">Hola que tal</p>

CSS

p {
  color: red;
  font-size: 4em;
}

.hola {
  color: green;
  font-size: 10em;
}

#adios {
  color: blueviolet;
  font-size: 1em;
}