CSS3 :nth-last-child伪类

来源: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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,672评论 0 7
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,451评论 1 62
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,506评论 0 44
  • 昨天晚上我实在太困了,于是就请了假,不写500字了。 但我请假的时候,还在自作多情地想,我会不会内疚得睡不着呢? ...
    薇薇安的30天阅读 206评论 0 0
  • UP主今天升级了XCode到8之后,打开了工程就崩溃了。。。,看错误代码 分析了一下,是PCCircleInfoV...
    cd28adedf8f6阅读 267评论 0 0