クラスセレクター (.class) と組み合わせた疑似クラス (:first-of-type) が失敗する

数日前の授業で、先生が疑似クラスセレクターの説明をしていたところ、疑似クラス(:first-of-type)とクラスセレクター(.class)の組み合わせがうまくいかないという問題に遭遇しました。

今日の私の理解を記録しましょう：

構造体疑似クラス (部分):

:first-of-type は、同じタイプの最初の要素を選択することを意味します

:last-of-type は、同じ型の最後の要素を選択することを意味します

:nth-of-type(n) は、同じ型の n 番目の要素を選択することを意味します

上記の 3 つのセレクターはすべて最初に一致し、次にソートされます

まず、疑似クラスでタグセレクターを使用します

コードは以下のように表示されます:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div:first-of-type {
           color: red;
       }
        
    </style>
</head>
<body>
     <p>0000000000000</p>
     <div class="demo">aaaaaaaaaaa</div>
     <p class="demo">jkjkjkjkjk</p>
     <div>bbbbbbbbbbbbb</div>
     <div class="demo">0900909090900090</div>
     <p>cccccccccccccc</p>
     <div>
         <div>ddddddddddddddd</div>
         <p>eeeeeeeeeeeeee</p>
         <div class="demo">fffffffffffffff</div>
         <p>11111111111111111</p>
         <div>2222222222222</div>
         <div>3333333333333</div>
     </div>
     <p>4444444444444444</p>
     <p>55555555555555</p>
     <div>
         <div class="demo">999999999999999</div>
         <p>666666666</p>
         <div>77777777777</div>
         <p>4545454545454</p>
     </div>
</body>
</html>

説明 ( :first-of-type は、同じタイプの最初の要素を選択することを意味します) によると、広告 9 の背景色が変わるという答えを出すことができます。

操作結果:

.demo クラスセレクターを使用すると、疑似クラスセレクターの説明によると、表示結果は af 9 であると推測されます。

    <style>
       .demo:first-of-type {
           color: red;
       }
        
    </style>
</head>
<body>
     <p>0000000000000</p>
     <div class="demo">aaaaaaaaaaa</div>
     <p class="demo">jkjkjkjkjk</p>
     <div>bbbbbbbbbbbbb</div>
     <div class="demo">0900909090900090</div>
     <p>cccccccccccccc</p>
     <div>
         <div>ddddddddddddddd</div>
         <p>eeeeeeeeeeeeee</p>
         <div class="demo">fffffffffffffff</div>
         <p>11111111111111111</p>
         <div>2222222222222</div>
         <div>3333333333333</div>
     </div>
     <p>4444444444444444</p>
     <p>55555555555555</p>
     <div>
         <div class="demo">999999999999999</div>
         <p>666666666</p>
         <div>77777777777</div>
         <p>4545454545454</p>
     </div>
</body>

操作結果:

ただし、結果の f の背景色は変更されません

この種の問題の理由は、コードが間違っているからではなく、.demo:first-of-type の意味を誤解していたからです。

ページが読み込まれると、ページは上から下に順番に実行されます。疑似クラスセレクターを使用する場合は、まずボディ内のネスト関係を見つけます。

ネストの第 1 レベル: body

ネストの第 2 レベル: body の 7 番目の子要素 div

ネストの第 3 レベル: body の最後の子要素 div

次に、3 つの入れ子レイヤーでクラスセレクター .demo を使用する要素を順番に見つけます ==> div 型の要素 (最初に一致)

次に、div 要素を並べ替え (post-sort)、3 レベルのネストで .demo を使用して div 要素を見つけ、同じタイプの最初の子要素にします。

ネストの 2 番目のレベルで内容が f である div 要素の上に div の兄弟要素があり、すべての f が色を変更しないことがわかります。

上記は私の理解です。欠点を指摘していただければ幸いです。

クラス セレクター (.class) と組み合わせた疑似クラス (:first-of-type) が失敗する

おすすめ

クラスセレクター (.class) と組み合わせた疑似クラス (:first-of-type) が失敗する