Prioridad de selectores descendentes en CSS
En todas las lecciones anteriores, todos los selectores debían capturar el elemento mismo. Puede ser que un selector capture el elemento, y el segundo selector capture el padre de este elemento.
Ya sabes que si al padre se le asigna, por ejemplo, un color, este color será heredado por el descendiente. Pero, si al descendiente también se le asigna un color, entonces el selector del descendiente tendrá mayor prioridad que el selector del padre.
Esto significa que el selector de etiqueta del descendiente vence a la clase del padre:
<div class="block">
<p>texto</p>
</div>
.block {
color: red;
}
p {
color: green; /* se aplicará este color */
}
:
El selector de etiqueta del descendiente también vence al identificador del padre:
<div id="block">
<p class="text">texto</p>
</div>
#block {
color: red;
}
.text {
color: green; /* se aplicará este color */
}
: