css中关于选择器:nth-child()和:nth-of-type()的深入理解

SOBER小于 1 分钟

css中关于选择器:nth-child()和:nth-of-type()的深入理解

相同点

都是修改父级下的的几个同级的元素的样式

不同点

  • :nth-child():

是修改父元素下的同级元素的第n个元素内的样式,

  • :nth-of-type()

    是修改父元素下的同级元素的第n个同类型元素的样式。

  • 例如:
    • p:nth-of-type(2)就是修改p元素的父级元素下的与p同级的第二个p元素的样式;
    • p:nth-child(2)就是修改p元素的父级元素下的与p同级的第二个元素的样式。