CSS3 の子孫セレクターと兄弟セレクターの紹介と例_html/css_WEB-ITnose

CSS セレクター レベル 3 仕様では、ドキュメント階層に関連するいくつかの 接続セレクター (または組み合わせセレクター) が定義されています。

は 子孫コンビネーター/子コンビネーター に分割されます と は同じ兄弟コンビネーター :

子孫セレクターは次の 3 つのタイプに分かれています:

1. スペース。 div p: p が div の子孫要素であり、div が p の祖先であることを意味します。このセレクターは、div の下の p 個の子孫要素をすべて選択します。

2. 矢印 (>)。直接的な関係を示します。 div > p は div の子孫の要素を表します。

3. アスタリスク (*)。世代関係を表します。 div * p は、div 以降の要素の孫を表します。

オンラインの例: http://wow.techbrood.com/fiddle/15759

同様のセレクターは次の 2 つのタイプに分けられます:

1. プラス記号 (+)。密接な関係を示します。 h1 + h2: h1 の直後の h2 要素を表します。
2. チルダ (~)。その後の関係を表します。 h1 ~ h2: h1 要素と同じ親要素の下にある後続の h2 要素を表します (間に他の要素を区切ることができます)。

オンライン例: http://wow.techbrood.com/fiddle/15761

CSS3 セレクターに関する参考資料:

http://techbrood.com/Guide/h5b2a?p=css-selectors

http://techbrood.com/Guide/h5b2a?p=css-pseudo-classes

by iefreer