Este ejemplo de selectores CSS descendientes no funciona:
p .aviso { color: red; }
<p> <h2 class="aviso">texto de p sin clase</h2> </p>
Tampoco este:
h1 h2 span { color: #3299cc; }
<h1><h2><span>span</span></h2></h1>
¿Por qué no funciona los estilos?
Respuestas
Los selectores CSS que has definido son correctos y deberían funcionar. El problema es que el código HTML que has utilizado no es correcto. Técnicamente se dice que el código HTML no es válido y por eso puede que los navegadores estén ignorando lo que quieres hacer.
¿Por qué ese código HTML no es correcto? En HTML los diferentes elementos o etiquetas se dividen principalmente en dos grupos: elementos de bloque (como <p>, <h1> y <div>) y elementos en línea (como <em>, <strong> y <span>). El problema con tu código HTML es que dentro de un elemento <p> solo puede haber elementos en línea, por lo que el <h2> que está dentro de <p> es incorrecto.
En el segundo ejemplo, el problema es que no puedes incluir un elemento <hx> dentro de otro elemento <hx>. Así que el <h2> que está dentro de <h1> es incorrecto.
En resumen, este sería el código HTML y CSS que deberías utilizar para que te funcione:
p span.aviso { color: red; }
<p> <span class="aviso">texto de p sin clase</span> </p>
h1 span { color: #3299cc; }
<h1><span>span</span></h1>
@javiereguiluz