html nthchild作用,详解CSS中:nth-child的用法

前端的哥们想必都接触过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，是不是很拉轰！

CSS3 nth-child的使用，详解css中nth的作用，以及nth-child的兼容写法

:nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html ...

CSS学习笔记(9)--详解CSS中:nth-child的用法

详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

详解 javascript中offsetleft属性的用法(转)

详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

举例详解CSS中的cursor属性

这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

详解css中的position属性

这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

详解Vue中watch的高级用法

我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码:

FullName: {{fullName} ...

转: 详解css中的display属性

在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

举例详解CSS中的的优先级

计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺 ...

举例详解CSS中的继承

CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...

随机推荐

SQL Server 2008 R2：快速清除日志文件的方法

本例,快速清理“students”数据库的日志,清理后日志文件不足1M. USE [master] GO ALTER DATABASE students SET RECOVERY SIMPLE WIT ...

10W -python

计算2 3 4 加运算符 小于30 >>> new=[''.join(('2',op,'3')) for op in ops] >>> print(new) ['2 ...

How to Calculate difference between two dates in C# z

Do you need to find the difference in number of days, hours or even minute between the two date rang ...

【Beta】Scrum Meeting 1

前言 会议定点:新主楼F座教室 会议时间:2019/4/26 会议目的:确定Beta版本的功能和设计文档 一.任务进度 组员 下阶段任务 大娃 后端模型正确性说明文档 二娃 记录会议内容,撰写博客 三 ...

tkinter进阶版——ttk

很长的一段时间里,我都是用tkinter进行GUI设计的,还写过一篇. 但后来慢慢地觉得,这个tkinter真的是有点丑啊. 于是,找到了现在的ttk. tt ...

Java 下一代: 函数式编码风格——Groovy、Scala 和 Clojure 共享的函数结构及其优势