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！

 

• CSS3
• css