CSSセレクターの詳しい説明 - relationship selectors_html/css_WEB-ITnose

CSS セレクターには、要素セレクター、関係セレクター、属性セレクター、疑似クラス セレクター、疑似オブジェクト セレクターが含まれることは誰もがよく知っていると思います。多くのセレクターの中から、独自のニーズに応じてスタイルを記述するための適切なセレクターをより柔軟に選択し、最大の品質と効率を達成することができます。

今日はセレクターの中でも「関係」セレクターを紹介します。物事をより効率的に行うためには、「関係」を明確に理解する必要があります。そうしないと、CSS で苦労することになります (笑)。リレーショナル セレクターには、セレクター、サブセレクター、隣接セレクター、兄弟セレクターの 4 つのカテゴリがあります。それでは、一つずつご紹介していきます。ここで特に注意していただきたいのは、私たちの日常生活で最も一般的に使用されているのは包含セレクターであるということです。なぜ私たちはこれを使用することに慣れているのでしょうか。 IE6 ブラウザではセレクターの組み込みのみがサポートされており、その他はサポートされていないためです。以前は（今は少し変わりましたが）IE6 がブラウザ市場の主役で、ユーザーカバー率が非常に高かったため、IE6 がサポートしていないものについては、必然的に IE6 をほとんど使用しなくなる、あるいは使用しないという現象が発生します。まったく使用しないでください。しかし、将来的には HTML5/CSS3 がトレンドになり、HTML5/CSS3 では、これまで役に立たないと誤って考えられていたタグの使用に注意が払われるようになるという記事を読んだ記憶があります。おそらくいつか、IE6 が本当に廃止され、私たちが役に立たないと誤って考えていたタグ構文が CSS 効率革命を引き起こすことになるでしょう。ハハ、それは完全に個人的な妄想です。真珠と同じように本物であるかのように扱わないでください。

セレクター(E F)を含む

構文:

E F{ sRules }

命令:

E 要素に含まれるすべての F 要素を選択します。

例:

出力結果の画像:

出力結果の説明: ul li は、ul に属している限り、ul の下にあるすべての li が機能することを意味します。

サブセレクター (E>F)

構文:

E>F{ sRules }

説明:

E の子要素であるすべての F 要素を選択します。

例:

出力結果の画像:

出力結果の説明: .test>li>a は、セレクター テストの li タグの下の a タグに対して動作することを意味します。上の例からわかるように、一部の li 要素にはその下に ul li セレクターがありますが、それらは機能しません。ご覧のとおり、子セレクターは、包含セレクターよりも細かい制御を提供します。上記の 2 つの例を組み合わせると、インクルード セレクターの深さと幅はサブオブジェクト セレクターの深さと幅を超えており、サブオブジェクト セレクターはインクルード セレクターよりも対象が絞られており、一意であると結論付けることもできます。これは、包含セレクターとサブセレクターの違いであり、比較的混乱を招く場所です。

隣接セレクター(E+F)

構文:

E+F{ sRules }

説明:

E要素の直後にあるF要素を選択します。

例:

出力結果の画像:

出力結果の説明: p+p は、p 要素の直後に別の p 要素がある場合にのみ、2 番目の p に影響を及ぼし始めることを意味します要素。 。つまり、構造内の最後の 2 つの p 要素のみが役割を果たしますが、それらが構造内にある場合、それらはどのタグにも影響しません。これは、p タグが 3 つ以上のシーケンスを形成しないためです (p タグを含む)。二）。

兄弟セレクター (E~F)

構文:

E~F{ sRules }

命令:

E 要素の後のすべての兄弟要素 F を選択します。

出力結果の画像:

出力結果の説明: p~p は、最初の p 要素が出現する限り、次の p 要素が役割を果たすことを意味します (つまり、構造内では、2 番目の p 要素が役割を果たします) p 要素の出現が影響します)。セレクターが p~p~p に設定されている場合、同様に、チェックイン関数は 3 番目 (3 番目を含む) の p 要素から開始されます。

注: 上記の例のスタイル セレクターを自由に変更し、テストして出力結果を確認することをお勧めします。自分で実験してみることでのみ、よりしっかりと記憶することができます。

上記の例を通じて、さまざまな関係セレクターの使用法を誰もがすでに理解しました。では、これらのセレクターを日常生活でどのように使用すればよいでしょうか?あとは各人の知性次第です。おそらく将来、これらのセレクターを使用して作成されたいくつかのエフェクトについて書き、一緒に研究し、議論するつもりです。合理的かつ効果的に使用すると、コードの品質が向上するだけでなく、効率も大幅に向上します。

注: 関連する Web サイト構築のヒントについては、Web サイト構築チュートリアル チャンネルにアクセスしてください。