您现在的位置: 365建站网 > 365学习 > CSS3中:nth-child的用法详解

CSS3中:nth-child的用法详解

文章来源:365jz.com     点击数:213    更新时间:2017-12-20 11:11   参与评论

CSS3中:nth-child定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

 

 

n 可以是数字、关键词或公式。

提示:请参阅 :nth-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素。

所有主流浏览器均支持 :nth-child() 选择器,除了 IE8 及更早的版本。
 

实例

规定属于其父元素的第二个子元素的每个 p 的背景色:

p:nth-child(2)
{
background:#ff0000;
}


: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!

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (213人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------