html5 – 使用CSS对列表的每个第3项进行样式化?

前端之家收集整理的这篇文章主要介绍了html5 – 使用CSS对列表的每个第3项进行样式化?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Select every Nth element in CSS4个答案我可以为每个第三列表项目样式吗?

目前在我的960px宽div我有列表的框,左侧浮动,并显示在一个3×3网格视图。它们也有一个30像素的边距,但是因为第3个第6和第9列表项有这个边距,它使它们向下跳一排,使网格显示错误

如何容易使第3和第6个没有边距 – 没有给他们一个不同的类,或者是唯一的方法呢?

解决方法

是的,你可以使用所谓的:nth-​​child()选择器。

在这种情况下,您将使用:

li:nth-child(3n) {
// Styling for every third element here.
}

:nth-​​child(3n):

3(0) = 0
3(1) = 3
3(2) = 6
3(3) = 9
3(4) = 12

:nth-​​child()在Chrome,Firefox和IE9中兼容。

对于一个工作使用:nth-​​child()在其他伪类/属性选择器在IE6到IE8,see this link

原文链接:https://www.f2er.com/html5/169943.html

猜你在找的HTML5相关文章