• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :nth-last-of-type()

    版本:CSS3

    :nth-last-of-type(an+b)这个 CSS 伪类,匹配那些在它之后有an+b-1个相同类型兄弟节点的元素,其中n为正值或零值。它基本上和:nth-of-type()一样,只是它从结尾处反序计数,而不是从开头处。

    语法

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

    匹配同类型中的倒数第n个同级兄弟元素E。

    • E元素是某个元素的子元素,E的父元素最高是<html>,即E可以是<html>的子元素,也就是说E可以是<body>
    • 该选择符总是能命中父元素的倒数第n个为E的子元素,不论倒数第n个子元素是否为E

    浏览器支持

    IE9+以及新版浏览器都支持:nth-last-of-type()

    例子

    <style>
    p:nth-last-of-type(2)
    {
    background:pink;
    }
    </style>
    
    
    <p>元素1</p>
    <p>元素2</p>
    <p>元素3</p>
    
    

    元素1

    元素2

    元素3

    
    <div>
      <span>This is a span.</span>
      <span>This is another span.</span>
      <em>This is emphasized.</em>
      <span>Wow, this span gets limed!!!</span>
      <strike>This is struck through.</strike>
      <span>Here is one last span.</span>
    </div>
    <style>
    em:nth-last-of-type(1) {color:red;}
    span:nth-last-of-type(2) {background-color: lime;}
    </style>
    
    
    This is a span.This is another span.This is emphasized.Wow, this span gets limed!!!This is struck through.Here is one last span.

    上篇::nth-of-type()

    下篇::empty