• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :last-child

    版本:CSS3

    :last-child 伪类,代表一组兄弟元素中的最后一个子元素。

    语法:

    E:last-child{sRules}

    在父元素下存在一组兄弟元素E:last-child匹配最后一个元素。

    • :last-child伪类,E元素是某个元素的子元素,E的父元素最高是<body>,即E可以是<body>的子元素
    • :last-child伪类,E必须是它的兄弟元素中的最后一个元素,换言之,E必须是父元素的最后一个子元素。
    • :first-child伪类与之类似,只不过情况正好相反,它是第一个子元素。

    浏览器支持

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

    例子

    <ul>
    	<li>列表项一</li>
    	<li>列表项二</li>
    	<li>列表项三</li>
    	<li>列表项四</li>
    </ul>
    
    //css
    li:last-child{color:#f00;background-color: lime;}
    

    设置最后<li>的样式,那么代码应该写成li:last-child,而不是ul:last-child

    • 列表项一
    • 列表项二
    • 列表项三
    • 列表项四
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    p:last-child
    {
    background:pink;
    }
    </style>
    </head>
    <body>
    <p>第一个元素</p>
    <p>最后一个元素</p>
    </body>
    </html>

    效果图:

    last-child伪类

    上篇::first-child

    下篇::only-child