nth-child和nth-of-type的区别和用法(选择器)

2024年3月27日 124次阅读 来源: 斯文败类

样式：p:nth-child(2){color:red;}
样式：span:nth-of-type(2){color:red;}

<div>
  <p>1</p>
  <p>2</p>//变红
</div>

<div>
  <em></em>
  <p>1</p>//变红
  <p>2</p>
</div>

<div>
  <em></em>
  <em></em>
  <p>1</p>
  <p>2</p>
</div>

<div>
  <span>1</span>
  <span>2</span>//变红
</div>

<div>
  <em></em>
  <span>1</span>
  <span>2</span>//变红
</div>

<div>
  <em></em>
  <em></em>
  <span>1</span>
  <span>2</span>//变红
</div>

<div>
  <em></em>
  <span>1</span>
  <em></em>
  <span>2</span>//变红
</div>

p:nth-child(3)伪类选择器的要求1：这个元素是选定的元素（例如：p），2：这个后面的数字表示所有子元素中的第3个
span:nth-of-type(3)伪类选择器要求1:这个元素是选定的元素（例如span）2：在父级元素中所有子元素span的第3个。
推荐文章：http://www.cnblogs.com/dolphinX/p/3347713.html

    原文作者：斯文败类
    原文地址: https://segmentfault.com/a/1190000005813533
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞