nth-of-type和nth-child是CSS選擇器中用于選擇特定位置的元素的偽類。它們之間的區(qū)別在于它們對(duì)待元素的方式不同。
nth-of-type：nth-of-type選擇器基于元素的類型來(lái)選擇特定位置的元素。它會(huì)匹配同一類型的元素中符合給定位置規(guī)則的元素。例如，:nth-of-type(2)將選擇同一父級(jí)下第二個(gè)出現(xiàn)的該類型元素。
nth-child：nth-child選擇器基于元素在其父級(jí)中的位置來(lái)選擇特定位置的元素。它會(huì)考慮所有子元素（無(wú)論其類型）并根據(jù)給定位置規(guī)則進(jìn)行匹配。例如，:nth-child(2)將選擇父級(jí)中的第二個(gè)子元素，而不僅僅是同一類型的元素。
具體來(lái)說(shuō)，區(qū)別可以通過(guò)以下示例說(shuō)明：
第一個(gè)段落
第二個(gè)段落
一個(gè)跨度為1的行內(nèi)元素
第三個(gè)段落
p:nth-of-type(1)將選擇第一個(gè)段落元素。
p:nth-child(1)將選擇第一個(gè)子元素，即第一個(gè)段落元素。
p:nth-of-type(2)將選擇第二個(gè)段落元素。
p:nth-child(2)將選擇第二個(gè)子元素，即跨度為1的行內(nèi)元素。
p:nth-of-type(3)將選擇第三個(gè)段落元素。
p:nth-child(3)將選擇第三個(gè)子元素，即第三個(gè)段落元素。
總結(jié)：nth-of-type基于元素類型選擇特定位置的元素，而nth-child基于元素在父級(jí)中的位置選擇特定位置的元素。
京公網(wǎng)安備 11010802030320號(hào)