HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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

大佬总结

以上是大佬教程为你收集整理的html5 – 使用CSS对列表的每个第3项进行样式化?全部内容,希望文章能够帮你解决html5 – 使用CSS对列表的每个第3项进行样式化?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。