问答详情
源自:2-16 综合案例

关于为什么a:nth-child(10)是10,而不是9的问题

看好多解答说是这里的10是指a标签父元素的第十个子元素。

但是如果这么理解,我写a:nth-child(10)和写p:nth-child(10),岂不是一个意思了?

a标签父元素的第十个子元素和p标签父元素的第十个子元素都是同一个a,但代码上去明显不是这样。

提问者:JohannGong 2018-07-23 13:44

个回答

  • 慕斯4517426
    2018-07-23 17:12:22
    已采纳

    你理解大致上是对的,但是这个元素需要是前面限定的标签。

    a:nth-child(10),指的是其父元素的第10个元素,如果这个元素是a,将其选择中;

    p:nth-child(10),指的是其父元素的第10个元素(还是那个a),如果这个元素是p,将其选中;但此处第十个元素是a,所以并不能选中;

    同理p:first-child 可以选中第一个p, a:first-child 不能选中元素。

    css选择器中的 :first-child, :last-child, :nth-child; 作用也是一样。

    css选择器还有:firts-of-type,nth-of-type,last-of-type,nth-last-of-type; 这几个选择器会先筛选出对应的类型,

    父标签下第9个a,可以用 a:nth-of-type(9)将其选中。