1. 程式人生 > >nth-child(n) 與 nth-of-type(n)  區別

nth-child(n) 與 nth-of-type(n)  區別

AD In 管理員 -c active 16px n) 個人 排序

 

 <ul class="active_M_list">
      <li>
          <img src="" alt="">
          <p>豪門盛宴獎多多,萬元大獎等你來拿</p>
          <p>創建時間:2017-06-24 16:33</p>
          <p>區間:01-26 00:00----01-30 00:00</p>
          <p><span>排序: 0</span> <span>管理員: admin</
span></p> <p> <span class="edit_btn" id="edit_btn">編輯</span> <span class="del_btn" id="del_btn">刪除</span> </p> </li> </ul>

舉例:

li p:nth-child(2) {

  ........

}

是指

技術分享圖片

li p:nth-of-type(1) {

  .....

}

是指

技術分享圖片

如果li 中都是同一類型的標簽,nth-child(n)則是指第n個子元素

如果li 中不是同一類型的標簽,nth-child(n)則是指 [父元素]的第n個[子元素],不區分標簽

p:nth-child(n) 是指在父元素中的第n個元素,只是數量

p:nth-of-type(n) 是 [指指定元素]在父元素中屬於第幾個

個人見解。歡迎指正

nth-child(n) 與 nth-of-type(n)  區別