1. CSS の通常の兄弟セレクターは、別の要素に接続されているすべての要素を参照します。両方の要素は同じ親要素を持ちます。
2. 通常の兄弟セレクターは、通常の兄弟の結合記号としてチルダ (~) を使用します。
例
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>共通の兄弟セレクター</title>
<スタイル>
.先祖 {
幅: 500ピクセル;
高さ: 300ピクセル;
}
。親 {
幅: 300ピクセル;
高さ: 200ピクセル;
}
。子供 {
幅: 200ピクセル;
高さ: 100ピクセル;
}
/* 兄弟が div である要素を .child1 の後に配置します*/
.child1~div {
背景色: ライトコーラル;
}
</スタイル>
</head>
<本文>
<div>
これが先祖です。
<div>
これは親です。
<div>これは child0 です。</div>
<div>これは child1 です。</div>
<div>これは child2 です。</div>
<div>これは子供 3 です。</div>
</div>
</div>
</body>
</html>
以上がCSSの通常の兄弟セレクターの理解です。皆さんのお役に立てれば幸いです。
CSS 学習ガイドの詳細: CSS チュートリアル