扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关css如何使用nth-child和nth-of-type，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联主要从事网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务乐东黎族,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
nth-child()是怎样工作的？
nth-child()伪类用于根据数字匹配元素，该数字表示元素在其兄弟元素中的位置。更具体地说，数字表示文档树中元素（减去1）之前存在的兄弟姐妹的数量。
这个数表示为函数a+b，其中n是索引，a和b是我们通过的任何整数。例如，为了选择每一个元素，我们可以编写以下任何一个：
:nth-child(1n+0){/*样式*/}
:nth-child(n+0){/*样式*/}
:nth-child(1n){/*样式*/}
除了使用这个函数，我们还可以传递一个整数，例如:nth-child(1)，或者set关键字，odd（奇数）或者even（偶数）。这些关键字是写出用于选择每个奇数或偶数元素的函数符号的备选方案。
:nth-child(odd){/*奇数元素的样式*/}
:nth-child(2n+1){/*奇数元素的样式*/}
:nth-child(even){/*偶数元素的样式*/}
:nth-child(2n+0){/*偶数元素的样式*/}
:nth-child()单独使用时，可以很容易地预测选择哪个元素。例如，使用此标记：
Thisisaparagraph.
Thisisaparagraph.
Thisisaparagraph.
Thisisaparagraph.
Thisisaparagraph.
Thisisaparagraph.
如果我们想选择第五个元素div，我们可以简单地写下面的内容
.example:nth-child(5){background:#ffdb3a;}
关于“css如何使用nth-child和nth-of-type”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网