JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Exemples de sélecteurs</h1>
<p>J'applique simplement le style <code>text-decoration:underline;</code> aux éléments concernés</p>

<h2>Exemple avec h1 ~ p</h2>
<div id="Ex1">
    <p>Un</p>
    <h1>Titre H1</h1>
    <p>Deux</p>
    <h2>Titre H2</h2>
    <p>Trois</p>
</div>

<h2>Exemple avec h1 + p</h2>
<div id="Ex2">
    <p>Un</p>
    <h1>Titre H1</h1>
    <p>Deux</p>
    <h2>Titre H2</h2>
    <p>Trois</p>
</div>

<h2>Exemple avec ul > a (pas appliqué, puisqu'il y a le &lt;li&gt; entre le &lt;ul&gt; et le &lt;a&gt;)</h2>
<div id="Ex3">
    <ul>
       <li><a href="#">Premier niveau</a></li>
       <li><a href="#">Premier niveau</a>
          <ul>
             <li><a href="#">Deuxième niveau</a></li>
          </ul>
       </li>
    </ul>
</div>

CSS

/*******************************/
/* Les sélecteurs pour le test */
/* Ce qui est important        */
/*******************************/
#Ex1 h1 ~ p { text-decoration:underline; }
#Ex2 h1 + p { text-decoration:underline; }
#Ex3 ul > a { background-color:#ccc; } /* Ne s'appliquera pas */


/* Les styles de la page générale */
h1, h2 { font-weight:bold; margin:20px 0; }
h1 { font-size:22px; }
h2 { font-size:17px; }
p { font-size:14px; margin:10px 0; }
ul {margin:10px 0;}
ul li {margin:10px 0 10px 20px;}
#Ex1 h1, #Ex2 h1 { font-size:16px; }
#Ex1 h2, #Ex2 h2 { font-size:13px; }
#Ex1 p, #Ex2 p   { font-size:12px; }