nth-of-type не работает должным образом

Question

У меня есть простая разметка

<div class='1'>
    <div class='11'></div>
    <div class='12'>
        <div class='121'></div>
    </div>
</div>

И я использую следующий CSS, чтобы попытаться нацелиться на .11 и .12

div div:nth-of-type(1) { // some rules for the first div }
div div:nth-of-type(2) { // some rules for the second div }

Однако, похоже, что div .121 является целью первого правила. Есть ли причина для этого?

Как бы я нацелился на .11 в первом правиле и .12 только во втором?

Answer 1

Это потому, что div.121 - первый div -тип потомка div.12.

Чтобы исключить его, уточните класс div.1 и добавьте дочерний комбинатор >, который будет соответствовать только дочерним элементам div.1, а не любому элементу внутри него ( этот ответ иллюстрирует другой пример):

div.1 > div:nth-of-type(1)
div.1 > div:nth-of-type(2)

Answer 2

Поскольку div.121 - это , также первый div, который является дочерним для div и поэтому соответствует тому же селектору.