nth-child和:nth-of-type的区别

:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。

例:

<div class="box">

    <div>1</div> 

  <p>1</p> 

  <p>2</p> 

</div> 

.box p:nth-child(1){

  color:red;  //选择失败,因为.box下面的第一个子元素不是p

}

.box p:nth-child(2){

  color:red;  //选择的元素是<p>1</p> 

}

.box p:nth-child(3){

  color:red;  //选择的元素是<p>2</p> 

}

.box p:nth-of-type(1){

  color:red;  //选择的元素是<p>1</p> 

}

上一篇:rabbitMQ的学习第一篇(持续更新)


下一篇:(亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)