:last-child
版本:CSS3
:last-child 伪类,代表一组兄弟元素中的最后一个子元素。
语法:
E :last-child{sRules}
在父元素下存在一组兄弟元素: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>
效果图: