Sự khác biệt giữa nth-child() và nth-of-type() trong CSS là gì?

Trong CSS, :nth-child() và :nth-of-type() là hai pseudo-class được sử dụng để chọn các phần tử dựa trên vị trí của chúng trong một nhóm các phần tử con của phần tử cha. Tuy nhiên, chúng có sự khác biệt quan trọng:

nth-child()

• :nth-child() chọn tất cả các phần tử là con thứ n của phần tử cha của chúng, bất kể loại phần tử là gì.
• Ví dụ, p:nth-child(2) sẽ chọn phần tử <p> nếu nó là phần tử con thứ hai của phần tử cha, không quan tâm đến loại của các phần tử con khác.

nth-of-type()

• :nth-of-type() chọn tất cả các phần tử là con thứ n của một loại cụ thể trong phần tử cha của chúng.
• Ví dụ, p:nth-of-type(2) sẽ chọn phần tử <p> thứ hai trong phần tử cha, không quan tâm đến vị trí tổng thể của nó trong số tất cả các phần tử con.

Sự Khác Biệt Chính

• Khi sử dụng `:nth-child...