CSS3 階層セレクターとは何ですか?

css3 階層セレクターに属します: 1. 子孫セレクター "E F"、E 要素のすべての子孫 F 要素を選択します; 2. 子要素セレクター "E>F"、E 要素の子の下にあるすべての要素を選択します要素 F; 3. 隣接する兄弟要素セレクター "E F" は、E 要素の直後の要素 F を選択します; 4. 兄弟セレクター "E~F"。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

子孫セレクター (E F)

子孫セレクターは包含セレクターとも呼ばれ、その機能は要素を選択することです。子孫要素、例: E F, ここで、E は祖先要素、F は子孫要素です。これは、E 要素のすべての子孫 F 要素が選択されることを意味します。これらを区切るにはスペースが必要であることに注意してください。ここでは、F が E 要素の子要素であるか孫要素であるか、あるいはより深い関係であるかどうかが選択されます。つまり、F が E 内でどのレベルの関係を持っているかに関係なく、F が選択されます。

.demo li {color: blue;}

上記は、div.demo 内のすべての li 要素が選択されていることを意味します

spa

すべて表示両方のデバイスの子孫セレクター。 #3d

子要素セレクター (E>F)

#子要素セレクターは、特定の要素の子要素のみを選択できます。E は親要素、F は子要素です。E>F は、E 要素の下にあるすべての子要素 ​​F が選択されることを意味します。これは、F が E の子孫要素である子孫セレクター (EF) や、F が E の子要素にすぎない子要素セレクター E > F とは異なります。 blog

ul > li {
background: green;
color: yellow;
}

上記のコードは、ul の下のすべてのサブ要素 li が選択されていることを示しています。例: bfc

IE6 は子要素セレクターをサポートしません。 #im

隣接兄弟要素セレクター (E F)

隣接兄弟セレクターは、別の要素の直後の要素を選択でき、それらは同じ親要素を持ちます。つまり、2 つの EF 要素は同じ親要素を持ち、F 要素は E 要素内にあり、それに隣接しています。 , したがって、隣接する兄弟要素セレクターを使用して F 要素を選択できます。 demo

li + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

上記のコードは、li の隣接する要素 li が選択されていることを示しています。ここでは合計 10 li があるため、上記のコードは 2 番目の li から 10 番目の li までを選択します。合計 9 つです。効果を見てください:

db

上記の li li のため、2 番目の li は最初の li の隣接要素です。 li、そして 3 番目の要素は再び 2 番目の隣接する要素であるため、3 番目の要素も選択され、以下同様に次の 9 つの li がすべて選択されます。別の方法で見ると、よりよく理解できるかもしれません:

img

.active + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

上記の知識によれば、このコードは明らかに li.active に隣接する li 要素を選択しますが、li.active に隣接する要素は 1 つだけであることに注意してください。図に示すように:

di

IE6 はこのセレクターをサポートしていません

ユニバーサル兄弟セレクター (E ～ F)

ユニバーサル兄弟要素セレクターは、CSS3 に追加された新しいセレクターです。このセレクターはすべて要素の後ろにある兄弟要素が選択されます。これらは隣接する兄弟要素にも似ており、同じ親要素内にある必要があります。つまり、E 要素と F 要素は同じ親要素に属し、F 要素はその親要素の後にあります。 E 要素. の場合、E ~ F セレクターはすべての E 要素の後ろにある F 要素を選択します。たとえば、次のコード:

.active ~ li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

上記のコードは、図に示すように、li.active 要素の背後にあるすべての兄弟要素 li が選択されることを意味します。 #ユニバーサル兄弟セレクターは、隣接兄弟セレクターとよく似ていますが、隣接兄弟セレクターは要素にのみ隣接する要素のみを選択する (1 つの要素のみが選択される) 点が異なります。一方、ユニバーサル兄弟要素はツールを選択します。選択されているのは、要素の背後にある隣接する兄弟要素です。このように言及すると混乱を招くかもしれません。隣接する兄弟要素のレンダリングを詳しく見ることができます。

IE6 は、このセレクターの使用をサポートしていません。

(学習ビデオ共有: css ビデオ チュートリアル )

以上がCSS3 階層セレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。