(CSS)セレクタ―の組み合わせについて

セレクタ―に"＋"（プラス記号）を使い下記のようにCSSを記述しました。

p + p {
color: orange
}

下記の解説通り解釈すると<section>の後にある同じ階層にある３つのPタグの真ん中だけに”color:orange”が適用されるのではないでしょうか？

”+”（プラス記号）を使ったセレクタ―の使い方が自分の中でうまく解釈できません。
”～”（波ダッシュ？ チルダ？ 記号）を使ったセレクタ―の組み合わせとうまく整理できません。

”「~区切りだと後ろに続くもの」、「+区切りだとすぐ後ろだけ」というイメージですね。”とサイトに解説してありますが、一番下に記述したタグのように「+区切り」でもすぐ後ろだけがオレンジ色に変わるわけではありません。


どなたかわかりやすいように解説していただけないでしょうか？ よろしくお願いいたします。



------------------------------------
あるサイトには以下のような説明があります。
https://saruwakakun.com/html-css/reference/selec …

◯ + ◯ {〜}

「+」で区切ると、同じ階層のすぐ隣（後ろ）の要素にのみCSSが適用されます。


使用例
(HTML)
<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用されない</p>

（CSS）
.example + p {
/*.exampleのすぐ後のpタグに対して…*/
color: orange;
}


------------------------------------

https://saruwakakun.com/html-css/reference/selec …
「~」で区切ると同階層の後につづく要素に適用されます。
r
▼使用例

<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用される</p>
.example ~ p {
color: orange;
}
/*.exampleの後のpタグに対して…*/

---------------------------------------------



<main>
<h1 class="ttl info">Title</h1>
<p>Hello, hello.</p>
<section>
<h1 class="ttl">Title</h1>
<p>Hello, hello.</p>

●<p>Hello, hello.</p>

<p>Hello, hello.</p>
</section>
</main>


(CSS)
p + p {
color:orange;
}

No.1 回答者： naokita 回答日時： 2020/07/31 14:54

＞<section>の後にある同じ階層にある３つのPタグの真ん中だけに”color:orange”が適用されるのではないでしょうか？

A,
いいえ、
p + pの場合だと、
Pの次P（次隣）がcolor:orangeになります！
真の隣なので、別のタグをを挟んだり順列だと無効になります。

<h1>title</h1>
<p>適用されない</p>
<p>前がPだから、次Pが適用される</p>
<p>前がPだから、次Pが適用される</p>
<p>前がPだから、次Pが適用される</p>

-----------
２個目だけにCSSで適用したいのなら、私なら、
h1 + p + p { color:orange;}

h1の 次Pの 次P って事です。

-----------

「~」でも、
:first-child
:nth-child(n)
からの応用でも可能ですが、貴方のスキルだと、まだ時期尚早でしょうから、
先に「+」を完璧に学習してからにしましょう。
頭で覚えるよりも、使って覚えた方が良いような気がします。

私は、「~」はまず利用しませんが、
「+」と「:first-child」は毎回のように利用します。