CSSサブクラスセレクターとは何ですか

CSS では、クラス セレクターは値 "E > F" セレクターであり、E 要素のすべての第 1 レベルの子要素 ​​F と一致するために使用されます。サブクラス セレクターは、親の直接の子孫のみを参照します。 element を使用すると、子要素の最初の世代にのみ影響し、「>」によって選択されることがわかります。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

推奨:

css ビデオ チュートリアル

サブクラス セレクター

選択した要素の下にサブクラスが表示されます

> 記号で区切ります。

構文説明

サブセレクターでは大なり記号 (下位結合記号) が使用されていることに気づいたはずです。

下位結合の両側に空白文字を含めることができますが、これはオプションです。したがって、次のように記述しても問題ありません：

h1 > strong
h1> strong
h1 >strong
h1>strong

右から左に読むと、セレクタ h1 >strong は「h1 要素の子である強い要素をすべて選択する」と解釈できます。

例:

<ul class="clothes">
        <li>衣服            <ul>
                <li>T恤</li>
                <li>衬衣</li>
                <li>短袖</li>
            </ul>
        </li>
        <br>
        <li>裤子            <ul>
                <li>牛仔裤</li>
                <li>休闲裤</li>
                <li>七分裤</li>
            </ul>
        </li>
    </ul>

これにはスタイルがありません。ブラウザでは次のように表示されます:

これはスタイルなしです。

<script>
       $(function () {
          $(".clothes>li").css("border","1px solid red");
       });    </script>

ブラウザの表示効果は次のとおりです:

第一世代のみであることがわかります。子 カテゴリ li (服、ズボン) のカテゴリには赤い枠線が表示されますが、T シャツ、ジーンズなどのその他のカテゴリにはスタイルがありません。

プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！

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