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