:last-child | CSS属性参考

CSS :last-child伪类选择器用于匹配父元素中的最后一个子元素。

:last-child伪类选择器仅仅会匹配某个父元素中的最后一个子元素，例如：

< article >    < p >      第一个段落...    </ p >    < p >      第二个段落...    </ p > </ article >

如果使用下面的CSS规则来添加样式，那么第二个段落的文字大小将被修改：

p:last-child {      font-size : 2em ; }

但是如果在容器中，<p>段落不是最后一个子元素，那么它不会被匹配，例如：

< article >    < h1 >标题</ h1 >    < p >      第一个段落...    </ p >    < h2 >      标题2    </ h2 > </ article >

如果还是使用上面的CSS规则，将没有<p>段落元素会被匹配。

在这种情况下，如果你想匹配段落元素，可以使用:lastt-of-type伪类选择器。正如其名字所示，:last-of-type伪类选择器匹配的是某种类型元素的最后一个元素。使用下面的代码将匹配H1标题之后的段落元素：

p:lastt-of-type {      font-size : 2em ; }

 示例代码

假如你有一段这样的HTML代码：

< article >      < h1 >这是一个标题元素</ h1 >      < p >          第一个段落，但不是父元素中的第一个元素。      </ p >      < p >          第二个段落。 < span >这是段落中的一个行内元素。</ span >      </ p >      < ul >          < li >第一个无序列表项</ li >          < li >第二个无序列表项</ li >          < li >第三个无序列表项</ li >      </ ul > </ article >

下面的代码会匹配第二个段落中的行内<span>元素。

span:last-child {      color : red ; }

下面的代码会匹配最后一个无序列表项。

li:last-child {      text-decoration : underline ;      color : deepPink; }

下面的代码不会匹配任何的p段落。

p:last-child {      font-style : italic ; }

下面的代码通过::before和::after伪元素来为<span>元素添加内容。

span:last-child::before {      content : "(" ;      color : deepPink; }   span:last-child::after {      content : ")" ;      color : deepPink; }

 在线演示

下面的例子是上面代码的实际效果。

这是一个标题元素

第一个段落，但不是父元素中的第一个元素。

第二个段落。 这是段落中的一个行内元素。

• 第一个无序列表项
• 第二个无序列表项
• 第三个无序列表项

 浏览器支持

所有的现代浏览器都支持:last-child伪类选择器，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。