通过 css 选择非固定数量子元素
在 html 结构中，元素的个数通常是不固定的。例如，以下 html 代码包含数量不定的 activebar 和 item 子元素：
*n *n
登录后复制
选择第一个 item 子元素
为了在元素个数不固定的情况下选择第一个 item 子元素，可以使用 css 选择器 :nth-child()。该选择器允许指定父元素中第几个子元素：
立即学习“前端免费学习笔记（深入）”；
:nth-child(n)
登录后复制
其中，n 可以是以下几种值：
数字：指定要选择的第几个子元素，例如 :nth-child(1) 选择第一个子元素。关键字 odd：选择所有奇数个的子元素，例如 :nth-child(odd) 选择第一个、第三个、第五个子元素等。关键字 even：选择所有偶数个的子元素，例如 :nth-child(even) 选择第二个、第四个、第六个子元素等。
要选择第一个 item 子元素，可以使用选择器：
.main .item:nth-child(1)
登录后复制
该选择器将匹配 main 类下的第一个 item 类元素。
注意：
使用 :nth-child() 选择器时，需要注意以下几点：
子元素必须是直接子元素，即不可嵌套。从 1 开始计数，而不是 0。
以上就是如何用 CSS 选择器在 HTML 结构中选取数量不固定的子元素？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2846867.html
