En CSS, ¿cuál es la diferencia entre la cascada y la herencia?

Question

En CSS, ¿cuál es la diferencia entre la cascada y la herencia?

¿O ambas cosas son lo mismo?

Answer 1

Herencia es sobre cómo las propiedades se filtran desde un elemento hasta sus elementos secundarios. Ciertas propiedades, como font-family, heredan. Si configura una familia de fuentes en body, esa familia de fuentes será heredada por todos los elementos dentro de body. Lo mismo es cierto para color, pero no es cierto para background o height que siempre será el predeterminado en transparent y auto. En la mayoría de los casos, esto tiene sentido. ¿Por qué heredaría el fondo? Eso sería un dolor. ¿Qué pasa si las fuentes no heredan? ¿Cómo se vería eso?

La cascada trata de lo que tiene prioridad cuando hay un conflicto. Las reglas de la cascada incluyen:

1. propiedades más adelante anulan las propiedades anteriores
2. selectores más específicos anular selectores menos específicos
3. propiedades especificadas anulan las propiedades heredadas

y así sucesivamente. La cascada resuelve cualquier situación de conflicto. Es el orden en que se aplican las propiedades.

---

(actualización) Especificidad es el calculation utilizado para determinar la prioridad de selección en la cascada. Cuando dos selectores se aplican al mismo elemento, el de mayor especificidad tiene prioridad.

1. de estilos en línea tienen una muy alta especificidad (1000)
2. de identificación tienen una especificidad del 100
3. clases/atributos y pseudo-clases añadir 10
4. elementos y pseudo-elementos añadir 1

Sume todas las piezas en una cadena de selector para determinar la especificidad total. En caso de empate, el último selector tiene prioridad.

Por supuesto, eso viene con varios edge-cases y advertencias. Una clase siempre anulará los elementos simples, no importa cuántos. Los selectores más específicos tienen prioridad sobre las propiedades heredadas de los selectores principales. Y puede descartar todos sus cálculos si alguien usó !important, que triunfa sobre todo.