[CSS兄弟セレクター]

最近プロジェクトを書いていると、兄弟セレクターがよく使われることに気づきました。よく使われる兄弟セレクターをまとめました。A が存在する場合に B に特定のスタイルを追加するためによく使用します。A が存在せず、B が別のスタイルの場合、兄弟セレクターを使用します。このデバイスは参照するのに非常に便利です。

html:
<div>
	<h2>标题部分</h2>
	<p>111</p>
	<p>222</p>
	<p class="on">333</p>
</div>

- 兄弟セレクター「+」

要素に隣接する兄弟要素、つまり互いに隣接しており、選択された要素が単一であることを示します。
h2 の下の最初の p を選択します: h2+p{ }

- 兄弟セレクター「~」

要素の後の同じレベルにある指定された要素がすべて選択されていることを示します。
h2 より下のすべての p を選択します: h2~p{ }

- 特定の兄弟要素を選択したい場合は、「~」と「.class名」を一緒に使用する必要があります

h2 の下にあるクラス名の要素を選択します: h2~.on{ }