CSS3 :nth-last-child伪类

作者: 圆梦人生 | 来源:发表于2016-10-19 18:42 被阅读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

来源:http://itssh.cn/post/930.html

相关文章

网友评论

    本文标题:CSS3 :nth-last-child伪类

    本文链接:https://www.haomeiwen.com/subject/phixuttx.html