css中的 nth-child(1) 不存在

<div>

<p>这是一个p</p>

<a>这是一个a</a>

<a>这是又一个a</a>

</div>

a:nth-child(2)的意思是：先拿出a元素的父元素（即div）中的第2个子元素，再看看是不是a，正好是，所以就选中了“<a>这是一个a</a>”；

同理，a:nth-child(1)的意思是：拿出div的第1个子元素，一看，是个p，不是a，所以不选中任何东西。

这样，就给人一种从第二位开始的错觉，如果你在a前面写两个p，就会给人一种从第三位开始的错觉，事实上，nth-child()当然是从1开始的。

建议尽量使用:nth-of-type()

a:nth-of-type(1)的意思是：选中a元素的父元素（即div）中的第一个a

 

 

nth-of-type与class结合使用

1）同种类型元素拥有同一个class

这种就是本文一开始时候提到的情况，让我们回到上面的第一个例子：

<div class='box'>
  <p>第一个段落</p>
  <p class='child'>第二个段落</p>
  <p>第三个段落</p>
  <p class='child'>第四个段落</p>
</div>

.child:nth-of-type(1) {
  background-color: red;
}

运行结果： 

根据以上nth-of-type的定义可知，nth-of-type这个选择器是根据元素的类型去选择的。 
当解析到.child:nth-of-type(1)时，浏览器一开始并不知道要选择的元素类型是什么，它会先找到.child这个类名，找到.child之后得知p元素拥有这个class，所以此时浏览器就知道了它要从p元素里面去匹配，就变成了p.child:nth-of-type(1)，找到了第一个p元素之后判断它有没有.child类名，有就匹配到该元素，没有则匹配不到任何元素。

所以，在这里要匹配到第1个拥有.child的p元素，应该将代码改成：

.child:nth-of-type(2) {
  background-color: red;
}

要匹配到第2个拥有.child的p元素，则把代码写成：

.child:nth-of-type(4) {
  background-color: red;
}

2）多种不同类型的元素拥有同一个class

重新修改DOM结构如下：

<div class='box'>
  <p class='child'>第一个段落</p>
  <span class='child'>乱入的span1</span>
  <p class='child'>第二个段落</p>
  <span class='child'>乱入的span2</span>
</div>

 .child:nth-of-type(2) {
   background-color: red;

运行结果： 

此时.child:nth-of-type(2)同时匹配到了第二个p元素和第二个span元素。浏览器会先去找.child这个class，找到.child后会把拥有.child这个类名的不同类型的标签分别划分到不同的组里面，再从这些组中分别进行选择。

总结下来就是： 
.class:nth-of-type(n)会同时选择到所有具有.class的元素类型组中的第n个拥有.class类的元素。 
也就是说.class:nth-of-type(n)相当于 *.class:nth-of-type(n)，它会匹配到所有拥有.class的 *:nth-of-type(n), *在这里表示所有拥有.class的元素类型。 
以上例子中的.child:nth-of-type(2)就相当于p.child:nth-of-type(2)，span.child:nth-of-type(2)。也就是拥有.child的所有p:nth-of-type(2), span:nth-of-type(2)。

原文：https://blog.csdn.net/dolanf/article/details/75804704 

 

 

参考地址：https://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/