CSS3 :nth-last-child伪类
2016-10-19 本文已影响12人
圆梦人生
来源：http://itssh.cn/post/930.html
CSS3 :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。可以统计如果dom元素个数超过4个就添加其他样式。
案例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>CSS3 :nth-last-child伪类</title>
<style type="text/css">
/*
li个数超过4个红色表示
*/
.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
color: red
}
</style>
</head>
<body>
<br/>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
效果：
QQ截图20161019184240.png
