“:nth-child(n)”是css中的一个选择器，作用是：匹配属于其父元素的第N个子元素，不论元素的类型；其中，参数“n”可以是数字、关键词或公式，例“:nth-child(3)”、“:nth-child(even)”。
本文操作环境：宏基s40-51、css3&&html5&&hbuilderx.3.0.5版、windows10 家庭中文版
（学习视频分享：css视频教程）
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。nth-child(n)是css3中的一种选择器。
:nth-child(n)选择器用于匹配父元素索引为n的子元素，即选取属于其父元素的第N个子元素，不论元素的类型。
说明：n可以是数字、关键词（Odd 和 even）或公式。
示例1：当n为数字
nbsp;html>:nth-child(n)选择器 /* :nth-child(n)选择器用于匹配父元素索引为n的子元素，即选取属于其父元素的第N个子元素，不论元素的类型。 n可以是数字、关键词（Odd 和 even）或公式。 *//* p:nth-child(2) {background: pink;} */第一个段落。
第二个段落。
第三个段落。
第四个段落。
登录后复制
效果图：
示例2：当n为关键词（Odd 和 even）
nbsp;html>:nth-child(n)选择器 p:nth-child(odd) {background: pink;}p:nth-child(even) {background: paleturquoise;}第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
第六个段落。
第七个段落。
第八个段落。
第九个段落。
第十个段落。
登录后复制
效果图：
示例3：当n为公式
nbsp;html>:nth-child(n)选择器 /* 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。 在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色： */p:nth-child(3n+0){background:pink;}第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
第六个段落。
第七个段落。
第八个段落。
第九个段落。
第十个段落。
登录后复制
效果图：
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
更多编程相关知识，请访问：css视频教程！！
以上就是:nth-child(n)的作用是什么的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2880735.html
