类型n不能按预期工作

Question

I've got some simple markup

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

And I'm using the following CSS to try and target the .11 and .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 }

However, it seems that div .121 is being targeted by the first rule. Is there a reason for this?

How would i target .11 in the first rule and .12 in the second only?

Answer 1

It's because div.121 is the first div -type child of div.12 .

To exclude it, qualify your div.1 's class and add the child combinator > , which will only match children of div.1 rather than any element inside it ( this answer illustrates another example):

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

Answer 2

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