友情提示

对不起!该功能尚未开放,请浏览其他内容! OK

CSS3 nth-child(num) 选择器

1

用法简介

使用说明

		 /*
			元素:nth-child(N)
			选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。N 可以是数字、关键词或公式。
		 */
		 .outer_box li{width:600px;height:50px;background:#000;margin:30px auto;list-style:none;}
		 .outer_box li:nth-child(1){background:red;}/*将第1个li背景设置成红色*/
		 .outer_box li:nth-child(5){background:blue;}/*将第5个li背景设置成蓝色*/
		 .outer_box li:nth-child(2):hover{background:green;}/*将第2个li背景设置成绿色*/
		
		 
		 .box2 li{width:600px;height:50px;background:#ccc;margin:30px auto;list-style:none;}
		 .box2 li:nth-child(odd){background:pink;}/*将第一个li的背景设置为粉红色后,在将其下面的所有li元素每间隔一个li再次设置成粉红色*/
		 
		 .box3 li{width:600px;height:50px;background:#ccc;margin:30px auto;list-style:none;}
		 .box3 li:nth-child(even){background:pink;}/*将第二个li的背景设置为粉红色后,在将其下面的所有li元素每间隔一个li再次设置成粉红色*/

		

查看演示

下载资源