zoukankan      html  css  js  c++  java
  • CSS 选择器 :last-child与:last-of-type的区别

    :last-child----represents the last element among a group of sibling elements.

    CSS伪类 :last-child 代表在一群兄弟元素中的最后一个元素。

    • :last-child与:last-of-type的区别
    • 从代码和图可以看出:last-child选择了最后一个li标签。

      同时,我们换另外一段代码,看看是否还有这样的效果。

      :last-child与:last-of-type的区别
      • 从代码和图可以看出,:last-child并没有起到我们想要的作用。如果,这个时候去掉最后的div标签,再看看效果。

        :last-child与:last-of-type的区别
      • 这时,效果出来了,那么,可以总结了。

        :last-child表示其父元素的最后一个子元素,且这个元素是css指定的元素,才可以生效。

        :last-of-type

         
        • 关于:last-of-type手册中是这么解释的:

          The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

          CSS伪类:last-of-type代表在一群兄弟元素中的最后一个指定类型的元素。

          直接用上面两个栗子。

          没有干扰元素,OK。

          :last-child与:last-of-type的区别
        • 有干扰元素,OK。

          :last-child与:last-of-type的区别
        • :last-of-type表示其父元素下的最后一个指定类型的元素。

           

        结尾

         
        • 总结了一番,对于什么场景下使用:last-child和:last-of-type又了相应的认识,以后犯错的可能性就会降低了很多。

           
  • 相关阅读:
    设计模式之观察者模式
    设计模式之外观模式
    设计模式之模板模式
    设计模式之装饰器模式
    设计模式之代理模式
    .NET常见问题汇总
    使用位运算计算两个整数的加减
    一个程序判断CPU是大端还是小端
    后缀表达式 转 表达式树
    实习一个月的小结
  • 原文地址:https://www.cnblogs.com/saryli/p/8490247.html
Copyright © 2011-2022 走看看