CSS のより大なり (>) セレクターとは何ですか?

CSS では、他のプログラミング言語のように、2 つの値を比較するために「">」記号は使用されません。ここでは、セレクターとして不等号 (>) を使用します。

CSS では、セレクターは 1 つまたは複数の HTML 要素を選択するために使用されます。セレクターで大なり記号を使用すると、親要素の直接の子要素が選択されますが、深くネストされた子要素は選択されません。

ユーザーは、次の構文に従って CSS セレクターで大なり記号を使用できます。

上記の構文では、「selector1」が親要素、「selector2」が直接の子要素です。したがって、子要素のスタイルを宣言ブロックで定義します。

例 1

以下の例では、HTML 要素の順序付きリストを作成します。 CSS では、「ol>li」セレクターを使用します。これは、「li」要素の直接の子であるすべての「ol」HTML 要素を選択することを意味します。

出力では、すべての "li" が "ol" の直接の子であるため、リスト内のすべての要素が青に変わることがわかります。

例 2

以下の例では、さまざまなレベルの「p」要素を含む div 要素があります。 div 要素内に、「ht4」要素と「p」要素を追加しました。したがって、2 番目と 3 番目の深さレベルに「p」要素を追加しました。

CSS では、「div>p」CSS セレクターを使用して、div 要素のすべての直接の「p」要素を選択します。さらに、div 要素内のすべての「p」要素を選択する「div p」CSS セレクターを使用しました。

出力では、最初の「p」要素が div 要素の唯一の直接の子であるため、「color: red」が最初の「p」要素にのみ適用されていることがわかります。 「div p」CSS セレクターがすべてのレベルから子要素を選択すると、「background-color: aqua」がすべての「p」要素に適用されます。

例 3

以下の例では、大なり記号を使用して、深くネストされたレベルから HTML 要素を選択します。ここでは、「container」HTML 要素に順序なしリストが含まれており、「container」要素の外側にも順序なしリストを作成しています。

CSS では、'.container>ul>li' CSS セレクターを使用して、'ul' 要素の直接の子であるすべての 'li' 要素を選択します。ここで、'ul' 要素は 'ul' の要素である必要があります。 element 直接の子要素がクラス名「Container」を持つ要素です。

出力では、すべての CSS がネストされたリストにのみ適用されていることがわかります。

ユーザーは、CSS で大なり記号 (>) CSS セレクターの使い方を学習しました。特定の要素の直接の子要素を選択するために使用されます。ここでは、HTML タグ、クラス名、ID などを使用できます。大なり記号 (>) を含む CSS セレクター。

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