【实测】CSS样式nth-child的灵活使用技巧及使用方法

一、需求描述
在开发过程中，会碰到一些选择器的需求：
例如使列表中的第一项或者最后一项显示不同的样式、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。
我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。

二、使用方法的代码示例
1.常见使用方法
first-child first-child：选择列表中的第一个标签。

举例：第一行字体显示为红色，代码如下：

li:first-child{color: red;}

复制代码

nth-child(n) nth-child(n)：选择列表中的第 n 个标签。

举例：第三行字体显示为蓝色，代码如下：

li:nth-child(3){color: blue;}

复制代码

nth-child(odd) nth-child(odd)：选择列表的奇数行。

举例，奇数行背景显示为灰色，代码如下：

li:nth-child(odd){ background: #999; }

复制代码

我们可以通过另外的方法选择奇数行，例如： nth-child(n+1) 、 nth-child(2n-1) 等。

代码如下：

/*First*/
li:nth-child(n+1){ background: #999; }

复制代码

/*Second*/
li:nth-child(2n-1){ background: #999; }

复制代码

nth-child(even) nth-child(even)：选择列表的偶数行。

举例：偶数行背景显示为土黄色（不要在意那些细节），代码如下：

li:nth-child(even){ background: #F6E0AF; }

复制代码

同样，我们可以通过另外的方法选择偶数行，例如： nth-child(2n) 。

代码如下：

li:nth-child(2n){ background: #F6E0AF; }

复制代码

上面的几种方法运行效果如下图：

2.更加灵活的使用方法
上面是几种比较常见的选择方法，我们还可以通过 CSS 更灵活的进行选择，有下面几种方法：

nth-child(-n+n) nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个，下同）。

举例：前三行背景色设置为绿色，代码如下：

li:nth-child(-n+3){ background: #2cae1d; }

复制代码

nth-child(n+n) nth-child(n+n)：选择第 n 个之后的元素。

举例：第五行及以后背景色设置为蓝色，代码如下：

li:nth-child(n+5){ background: #0ab1fc; }

复制代码

nth-last-child(n) nth-last-child(n)：选择倒数第 n 个元素。

举例：倒数第三元素字体设置为红色，代码如下：

li:nth-last-child(3){ color: red; }

复制代码

同样可以使用上面的方法进行拓展，方法如下：

nth-last-child(n+n) nth-last-child(n+n)：选择倒数第 n 个之前的元素。

举例：倒数第三个及之前的元素字体设置为粗体，代码如下：

li:nth-last-child(n+3){ font-weight: bold; }

复制代码

上面的几种方法运行效果如下图：

nth-last-child(3n) nth-last-child(3n)：选择第 3、6、. . . 个元素，选择三的倍数。

举例：第3、6、 . . . 三的倍数行背景色设置为橙色，代码如下：

li:nth-child(3n){ background: orange; }

复制代码

nth-last-child(3n+1) nth-last-child(3n+1)：选择第 1、4、7 个元素，从第一个开始每个递增三个。

举例：第1、4、7 . . . 行背景色设置为红色，代码如下：

li:nth-child(3n+1){ background: red; }

复制代码

上面的几种方法运行效果如下图：

		自动登录	找回密码
密码			立即注册

【实测】CSS样式nth-child的灵活使用技巧及使用方法-Discuz教程下载

【实测】CSS样式nth-child的灵活使用技巧及使用方法

相关文章

全部评论 0

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

discuz主题分类设置伪静态的方法43人阅读

Discuz!标签页面如何增加分页？32人阅读

Discuz!教程之DIY主题模块增加主题随机排序功能27人阅读

discuz的tag标签列表页排序问题：实现新帖在前55人阅读

Discuz!添加新的DIY页面，并且实现帖子模块分页 (翻页) 功能67人阅读

【原创】左侧导航栏样式，点击展开一级分类二级分类的DIY+CSS+JS2415人阅读

【原创】discuz论坛首页四格，幻灯片+文字列表切换功能DIY+CSS+j4278人阅读

【原创】侧边导航栏样式，点击跳转到对应位置的DIY+CSS模块4079人阅读

【原创】分享一款html5+css3带倒计时效果并跳转指定网址的单页DI4061人阅读

【原创】分享一款横排5格免扣字体素材资源下载风格DIY+JS+CSS模4693人阅读

所属版块