nth-child(n)和nth-of-type(n)的区别


1.官方解释:

  p:nth-child(2)     选择属于其父元素的第二个子元素的每个 <p> 元素。
  p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

2.大白话

  p:nth-child(2)  选择p同级元素中的(从前到后的)第二个元素

  p:nth-of-type(2)  选择p同级元素中的第二个p元素

第一个是不管谁都得算上,第二个只管看p元素

简单的实例了解一下

p:nth-child(2):

<style> p:nth-child(2) { background:hotpink; } /*选中的是p的父元素的第二个元素*/ </style>
<body>
  <h1>这是标题</h1>
  <p>第一个段落。</p>
  <p>第二个段落。</p>
  <p>第三个段落。</p>
  <p>第四个段落。</p>
</body>

 

 

p:nth-of-type(2):

<style>  p:nth-of-type(2){background: hotpink;} /* 选中的是p的父元素的子元素中第二个p*/ </style>
<body>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
</body>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM