最新消息:

详解CSS中:nth-child的用法

HTML/CSS dede58.com 浏览 评论

前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”。

下面我将用几个典型的实例来给大家讲解:nth-child的实际用途:

Tips:还用低版本的IE浏览器的哥们请绕过!

:nth-child(2)选取第几个标签,“2可以是你想要的数字”

.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同

点此查看实例展示

.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)选取小于等于4标签

点此查看实例展示

.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)选取偶数标签,2n也可以是even

点此查看实例展示

.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)选取奇数标签,2n-1可以是odd

点此查看实例展示

.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”

点此查看实例展示

.demo01 li:nth-child(3n+1){background:#090}

:last-child选取最后一个标签

点此查看实例展示

.demo01 li:last-child{background:#090}

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

点此查看实例展示

.demo01 li:nth-last-child(3){background:#090}

ok,:nth-child的这些用法在实际中很用得着,不用单独给需要选取的标签加上ID或Class,是不是很拉轰!

转载请注明:大前端 » 详解CSS中:nth-child的用法

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)
    • 验证码 点击我更换图片

    网友最新评论

    金马堂资料大全 现场开奖网 手机报码室 六合资料大全 六合财神
    六合在线 白小姐中特网 香港中特网 香港马会开奖结果 118图库
    香港马会资料 管家婆彩图 红姐图库 白小姐玄机图 黄大仙
    特码图库 铁算盘开奖 香港中特网 香港六合彩公司 历史开奖记录
    六开彩开奖结果 六盒合彩资料 买马网站 现场直播 特码走势图
    香港正版挂牌 管家婆王中王 王中王特码玄机 六合彩图库 香港6合彩
    天线宝宝六合 香港中特网 深港图库 金多宝现场开奖 香港金多宝
    六合彩特码 九龙官方網 六合彩开奖 神算子中特网 马会资料大全
    香港挂牌 高清跑狗玄机图 新报跑狗图 跑狗玄机图 正版跑狗图
    六合彩公司 博彩通 百家乐 香港总彩特马 黄大仙救世网
    六和彩 铁算盘四肖 红心水论坛 香港内部一肖 白小姐一肖
    东方心经马报 最准一肖中特 一肖一码 四肖中特 香港中特网
    管家婆彩图 168开奖现场 王中王救世网 高清跑狗图 护民图库
    红姐图库 彩霸王综合资料 曾道人 六合开奖结果 六合彩开奖日期
    平特高手 管家婆 六合高手论 平特一肖 彩票之家
    六合手机开奖 六合论坛 手机开奖 老香港六合 六合论坛
    香港马会 马会开奖结果 香港最快开奖 开奖现场直播 118kj开奖现场
    香港马会资料 香港九龙 九龙官方網 惠泽社群 香港六合采
    六合彩公司 历史开奖记录 六合彩论坛 六合彩资料 六合彩特码
    特码玄机 资料大全 六合免费中特 香港正版挂牌 资料大全2018年
    马会资料 六合彩公益 黄大仙综合资料 白小姐中特网 平特一肖
    平特高手 118论坛 百家乐投注站 特码走势图 一码公式规律
    开奖记录 百家乐图库 博彩网址大全 77498开奖现场 香港现场直播
    987开奖网 一码资料 内幕资料 六合彩特码 单双大小
    开奖历史 六合彩公式