E:nth-last-of-type(n)

语法:

E:nth-last-of-type(n) { sRules }

说明:

匹配父元素的倒数第n个子元素E。

需要注意3个要点:

  • 首先,因为匹配的是父元素的子元素,这意味着E元素必须作为某个元素的子元素存在(E元素的父元素最高是html,也就是说E元素最高是body,这表示任何非html的元素都符合这个约束,因为html元素是根元素。)
  • 其次,匹配的是父元素的倒数第n个为E的子元素(被命中的不一定是倒数第n个子元素,因为匹配的不是倒数第n个子元素,而是倒数第n个为E的子元素)

    来看下面这个例子:

    HTML示例代码:

    <div class="demo"> <p>p1</p> <p>p2</p> <span>span1</span> <p>p3</p> <span>span2</span> </div>

    如上HTML,要命中倒数第1个p元素,代码如下:

    .demo p:nth-last-of-type(1) { color: #f00; }

    此时p3会被命中,虽然p3是 .demo 的倒数第2个子元素,但却是倒数第1个为p的子元素

  • 再次,只能匹配与E元素同级的元素,即:E元素的兄弟元素

    来看下面这个例子:

    HTML示例代码:

    <div class="demo"> <span>span1</span> <p> <span>span2</span> <span>span3</span> </p> <span>span4</span> </div>

    如上HTML,你将不能通过下面的代码命中span3:

    .demo span:nth-last-of-type(2) { color: #f00; }

    因为span3并不是.demo的倒数第二个span子元素,而是p的倒数第一个span子元素,上述选择符最终命中的会是span1和span2

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-8.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
IE9.0+

示例:

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号:画漫画的程序员,每天早上8点30分准时推送:前端前沿资讯、大厂面试题、程序员轶事、职场感悟等,一起进步!

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界