您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何使用CSS2选择器获取元素的第n个子元素?

如何使用CSS2选择器获取元素的第n个子元素?

您可以将相邻的同级组合器与:first-child伪类一起使用,重复组合器的次数可以达到第n个孩子。

对于任何元素E,均以开头E:first-child,然后+E为后续子项添加,直到找到要定位的元素。当然,您不必使用相同的元素E;您可以将其切换为任何类型,类,ID等,但是重要的位是:first-child+符号。

例如,要获取liolCSS3选择器的第三个:

ol > li:nth-child(3)

将像这样在CSS2中复制:

ol > li:first-child + li + li

插图:

<ol>
  <li></li> <!-- ol > li:nth-child(1), ol > li:first-child -->
  <li></li> <!-- ol > li:nth-child(2), ol > li:first-child + li -->
  <li></li> <!-- ol > li:nth-child(3), ol > li:first-child + li + li -->
  <li></li> <!-- ol > li:nth-child(4), ol > li:first-child + li + li + li -->
</ol>

请注意,由于没有同级组合器可以查看_前面的_同级(在CSS2和CSS3中都没有),因此您无法仿真:nth-last-child():last-child使用CSS2选择器。

此外,您一次只能模拟:nth-child(b)一个特定的孩子,其中b的公式中an+b为常数(如规范中所述);仅靠相邻的兄弟组合器就无法实现任何复杂的公式。

CSS 2022/1/1 18:18:11 有619人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶