css3选择器nth-of-type的问题

Question

.content .box2:nth-of-type(2) {
     background: #fed;
}

<div class="content">
    <div class="box1">box1</div>
    <p class="box2">box2</p>
    <p>text</p>
    <p class="box2">box2</p>
</div>

为什么没有选择到任何一个元素，不应该选择到第2个.box2吗？

Answer 1

请参考张鑫旭大大的文章：传送门

Answer 2

<

div class="content">
    <div class="box1">box1</div>
    <p class="box2">box2</p>
    <p class="box2">box2</p>
    <p class="box2">box2</p>
</div>

这样才能选择上第2个.box2

Answer 3

nth-of-type是按类型来数的，比如你上面的那一段

<div class="content">
    <div class="box1">box1</div>
    <p class="box2">box2</p>
    <p>text</p>
    <p class="box2">box2</p>
</div>

因为你是用的.box2并且还是按照类型来选择，但一开始它是不知道你要选择的元素类型的，当选中第一个.box时，它就会确认这个元素的类型，然后后面的选择根据这个类型来选，每碰到这个类型它就加1，如果你想选择的是第一个p应该写nth-of-type(1)第三个p应该写nth-of-type(3),或者你也可以用nth-child。