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

来源:2-16 综合案例

JohannGong

2018-07-23 13:44

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

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

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

写回答 关注

1回答

  • 慕斯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)将其选中。

    Johann...

    非常感谢!

    2018-07-23 17:43:47

    共 1 条回复 >

jQuery基础 (一)—样式篇

jQuery初入开启样式修炼,体验万能的jQuery样式集搭建网站布局

217509 学习 · 1218 问题

查看课程

相似问题