:nth-child( ) css3

2017-01-23 15:01:42 :nth-child( ) css3 伪类选择器样式，使用:nth-child()设置选定对象的CSS样式，兼容各大主流浏览器，兼容IE8以上浏览器。css3 nth-child()图文实例教程

:nth-child() css3伪类属性，对对象选择性设置CSS样式功能伪类

一、nth-child()作用功能介绍

给予设置指定对象内选定的标签设置CSS样式。

比如一组ul li列表标签内，若干个li盒子对象，想要ul内第几个li设置不同CSS样式，以前可能是对其li单独设置class或id，现在可以使用li:nth-child()设置选定li设置不同CSS样式。

:nth-child()设置顺数第几个标签

浏览器兼容性：
主流浏览器均兼容，微软IE8以上兼容，IE8以下不兼容。

二、:nth-child()语法与示例

以下N代表正整数
1、:nth-child(odd)或:nth-child(2n-1)奇数(单数)对象设置样式

2、:nth-child(even)或者:nth-child(2n)偶数（双数）对象设置样式

以上奇（单）数偶（双）数设置可以实现对象隔行样式

1）、:nth-child(odd)与:nth-child(even)实例代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>odd even奇数偶数实例</title>
<style>
ul,li{ list-style:none; margin:0; padding:0}
ul li:nth-child(odd){ background:#000; color:#FFF}
ul li:nth-child(even){ background:#FFF; color:#F00}
</style>
</head>
<body>
<ul>
	<li>第一排 奇数排 HTML8实例</li>
    <li>第二排 偶数排</li>
    <li>第三排 奇数排</li>
    <li>第四排 偶数排</li>
    <li>第五排 奇数排</li>
    <li>第六排 偶数排</li>
</ul></body>
</html>

谷歌chrome浏览器效果截图

奇数偶数实例截图

在线演示：

查看案例

2）、:nth-child(2n-1)与:nth-child(2n)实例单数（奇数）与双数（偶数）对象样式

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:nth-child(2)指定设置对象样式</title>
<style>
ul,li{ list-style:none; margin:0; padding:0}
ul li:nth-child(2n-1){ background:#000; color:#FFF}
ul li:nth-child(2n){ background:#FFF; color:#F00}
</style>
</head>
<body>
<ul>
	<li>第一排 奇数排 HTML8实例</li>
    <li>第二排 偶数排</li>
    <li>第三排 奇数排</li>
    <li>第四排 偶数排</li>
    <li>第五排 奇数排</li>
    <li>第六排 偶数排</li>
</ul>
</body>
</html>

截图

使用2n-1与2n实现对象隔行不同样式

在线演示：

查看案例

3、:nth-child(2) 具体选择第几个对象设置样式

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:nth-child(2) :nth-child(4)指定设置对象样式</title>
<style>
ul,li{ list-style:none; margin:0; padding:0}
ul li:nth-child(2){color:#F00}/*设置第2个li 字体颜色为红色*/
ul li:nth-child(4){color:#00F}/*设置第4个li 字体颜色为蓝色*/
</style>
</head>
<body>
<ul>
	<li>第一排 HTML8实例</li>
    <li>第二排</li>
    <li>第三排</li>
    <li>第四排</li>
    <li>第五排</li>
    <li>第六排</li>
</ul>
</body>
</html>

实例截图

设置固定数值，来设置具体所在对象CSS样式

在线演示：

查看案例

4、:nth-child(n+3) 选择大于等于3对象设置样式

div css实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:nth-child(n+3)指定等于大于第三个3个后li设置样式</title>
<style>
ul,li{ list-style:none; margin:0; padding:0}
ul li:nth-child(n+3){color:#F00}/*设置大于等于第3的个li 字体颜色为红色*/
</style>
</head>
<body>
<ul>
	<li>第一排 HTML8实例</li>
    <li>第二排</li>
    <li>第三排</li>
    <li>第四排</li>
    <li>第五排</li>
    <li>第六排</li>
</ul>
</body>
</html>

截图

大于等于第三个对象被设置CSS样式

在线演示：

查看案例

5、:nth-child(-n+3) 选取小于等于3对象设置样式（前三个对象标签样式设置）

实例DIV CSS代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:nth-child(-n+3)指定小于等于第三个li被设置样式</title>
<style>
ul,li{ list-style:none; margin:0; padding:0}
ul li:nth-child(-n+3){color:#F00}/*设置小于等于第3的个li 字体颜色为红色*/
</style>
</head>
<body>
<ul>
	<li>第一排 HTML8实例</li>
    <li>第二排</li>
    <li>第三排</li>
    <li>第四排</li>
    <li>第五排</li>
    <li>第六排</li>
</ul>
</body>
</html>

前3个li对象被设置字体为红色

截图

前几个li被设置需要CSS样式

在线演示：

查看案例

以上DIV CSS实例文件免费打包下载：

立即下载（4.225KB）

三、CSS3之:nth-child() 总结

使用:nth-child( )可指定对象设置CSS样式、也可以设置隔行样式效果、也可以设置选定几个标签对象的CSS样式，根据需求使用。