• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :last-of-type

    版本:CSS3

    :last-of-type,CSS伪类,表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素,也包括子元素的最后一个子元素并以此类推。

    语法:

    E:last-of-type{sRules}

    匹配同类型中的最后一个同级兄弟元素E。

    • 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是<html>,也就是说E可以是<body>
    • 该选择符总是能命中父元素的倒数第1个为E的子元素,不论倒数第1个子元素是否为E

    浏览器支持

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

    例子

    
    <style>
    p:last-of-type{background-color:#f79578;}
    </style>
    
    <h3>这是标题</h3>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
    <p>这是第四个段落。</p>
    
    

    这是标题

    这是第一个段落。

    这是第二个段落。

    这是第三个段落。

    这是第四个段落。

    <style>
    p em:last-of-type {color:red;}
    </style>
    
    <p>
      <em>我没有颜色 :(</em><br>
      <strong>我没有颜色 :(</strong><br>
      <em>我有颜色 :D</em><br>
      <strong>我也没有颜色 :(</strong><br>
    </p>
    
    <p>
      <em>我没有颜色 :(</em><br>
      <span><em>我有颜色!</em></span><br>
      <strong>我没有颜色 :(</strong><br>
      <em>我有颜色 :D</em><br>
      <span>
        <em>我在子元素里,但没有颜色!</em><br>
        <span style="text-decoration:line-through;"> 我没有颜色 </span><br>
        <em>我却有颜色!</em><br>
      </span><br>
      <strong>我也没有颜色 :(</strong>
    </p>
    

    我没有颜色:(
    我没有颜色:(
    我有颜色:D
    我也没有颜色:(

    我没有颜色:(
    我有颜色!
    我没有颜色:(
    我有颜色:D
    我在子元素里,但没有颜色!
    我没有颜色
    我却有颜色!

    我也没有颜色:(

    上篇::first-of-type

    下篇::target