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

  • Z时代
  • 2024-01-10
  • 分类：问答

是否有可能在CSS2中获得有序列表的第n个元素？

（类似于:nth-child()CSS3）

仅供参考：我正在尝试将德语版本的Parcheesi编程为XHTML

1.1和CSS2兼容，并尝试通过使用有序列表来生成运动场，因此移动选项由数据结构预先确定。为了围绕中心定位，我想通过数字选择列表元素。

回答：

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

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

例如，要获取li其olCSS3选择器的第三个：

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为常数（如规范中所述）；仅靠相邻的兄弟组合器就无法实现任何复杂的公式。

以上是 如何使用CSS2选择器获取元素的第n个子元素？ 的全部内容， 来源链接： utcz.com/qa/415354.html

回到顶部