nth-child & nth-of-type

  • nth-child和nth-of-type區(qū)別
ABAAAB
B:nth-child(2n){some style}
此時序列中所有的B都將被選中

上面示例中,nth-child會在B的同級元素節(jié)點中尋找符合的元素

  1. 類名或者標(biāo)簽為B
  2. index為2n ,同級的所有類型的元素都參與排序
ABAAAB
B:nth-of-type(2n){some style}
此時序列中第二個B將被選中

nth-of-type選中規(guī)則

  1. 類名或者標(biāo)簽為B
  2. 在所有的類型B中選取index為2n的元素,其它類型的元素不參與排序
  • 總結(jié)

nth-child和nth-of-type區(qū)別主要在與其它類型的元素是不是參與排序.
從字面意思也能理解.
nth-child是typeA:nth child of father,不分組在所有的元素里找nth元素再看這個元素是不是typeA.
nth-of-type是typeA:nth type(A) child of father,先把typeA元素單拎出來,然后在新的只有typeA的序列里選nth元素

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容