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的孩子，而不是其中的任何元素（{{3}说明了另一个例子）：

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

Answer 2

因为div.121 也是第一个div，它是div的子节点，因此被相同的选择器匹配。