隣接セレクタ、間接セレクタ、直下セレクタの動作を確認します。
デモページはこちら

隣接セレクタ	間接セレクタ	直下セレクタ
A + B	A ~ B	A > B
同一階層	同一階層	直下階層
直後のみ	直後以降複数	直下複数

隣接セレクタ「+（プラス）」は同一階層の直後の要素のみに適用されます。

<h1 class="ttl">見出し</h1>
<div class="txt">ダミーテキスト（適用）</div>
<div class="txt">ダミーテキスト</div>

h1 + div {
  color: #ff0000;
}

間接セレクタ「~（チルダ）」は同一階層の直後以降、複数の要素に適用されます。

<h2 class="ttl">見出し</h2>
<div class="txt">ダミーテキスト（適用）</div>
<div class="txt">ダミーテキスト（適用）</div>

h2 ~ div {
  color: #ff0000;
}

離れている特定の同一階層の要素に対し、クラス名を指定して間接セレクタを適用することもできます。

<h3 class="ttl">見出し</h3>
<div class="txt">ダミーテキスト</div>
<div class="subtxt">ダミーテキスト（適用）</div>

h3 ~ .subtxt {
  color: #ff0000;
}

直下セレクタ「>」は直下階層の複数の要素に適用されます。適用されるのは直下の階層のみで、階層が深くなると適用されません。

<ul class="list">
  <li class="txt">ダミーテキスト</li>
  <li class="txt">ダミーテキスト（適用）
    <ul class="sublist">
      <li class="txt">ダミーテキスト</li>
      <li class="txt">ダミーテキスト</li>
    </ul>
  </li>
  <li class="txt">ダミーテキスト（適用）</li>
</ul>

.list > li:not(:first-child) {
  margin-top: 20px;
}