您的位置:首页 > CSS3 > 正文

:nth-child( ) css3 伪类选择器样式

: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>第一排 奇数排 ThinkCSS实例</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>第一排 奇数排 ThinkCSS实例</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>第一排 ThinkCSS实例</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>第一排 ThinkCSS实例</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>第一排 ThinkCSS实例</li>
<li>第二排</li>
<li>第三排</li>
<li>第四排</li>
<li>第五排</li>
<li>第六排</li>
</ul>
</body>
</html>

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

截图


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

在线演示:

查看案例

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

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

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

相关标签: css3
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/css3-style/1249.shtml

日期:2017-01-23 14:50:34 来源:www.thinkcss.com 作者:ThinkCSS