Псевдокласс (:first-of-type) в сочетании с селектором класса (.class) не работает

Несколько дней назад в классе, когда учитель объяснял селектор псевдокласса, он столкнулся с проблемой, что комбинация псевдокласса (:first-of-type) и селектора класса (.class) не удалась.

Позвольте мне записать мое понимание сегодня:

Псевдокласс структуры (частичный):

:first-of-type означает выбор первого элемента того же типа

:last-of-type означает выбор последнего элемента того же типа

:nth-of-type(n) означает выбор n-го элемента того же типа

Все три вышеупомянутых селектора сначала сопоставляются, а затем сортируются.

Во-первых, используйте селекторы тегов с псевдоклассами.

код показывает, как показано ниже:

<!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 , согласно описанию селектора псевдокласса, мы предполагаем, что результат отображения равен 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.

Когда страница загружается, страница выполняется последовательно сверху вниз.При использовании селектора псевдокласса сначала найдите отношение вложенности в теле

Первый уровень вложенности: тело

Второй уровень вложенности: седьмой дочерний элемент div в теле

Третий уровень вложенности: последний дочерний элемент div в теле

Затем найдите элементы, которые используют селектор класса .demo в трех вложенных слоях по очереди ==> элементы типа div (сначала совпадают)

Затем отсортируйте элементы div (пост-сортировка) , узнайте элементы div с помощью .demo в трехуровневой вложенности и будьте первым дочерним элементом того же типа

Видно, что над элементом div находится одноуровневый элемент div, содержимое которого равно f на втором уровне вложенности , и все f не будут менять цвет.

Вышеизложенное - это мое понимание, я надеюсь, что вы, ребята, можете указать на недостатки

Псевдокласс (:first-of-type) в сочетании с селектором класса (.class) не работает

Acho que você gosta