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

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

(类似于CSS3中的nth-child())

FYI：我试图将Parcheesi的德语版本编程为XHTML 1.1和CSS2兼容性,并尝试通过使用有序列表生成播放场,因此移动选项是由数据结构预先确定的.为了围绕中心定位,我想按数字选择列表元素.

解决方法

您可以使用 adjacent sibling combinators与 :first-child pseudo-class结合使用,重复组合器多次,您需要达到某个第n个孩子.这也在 an answer to a different question年提到.

对于任何元素E,从E：first-child开始,然后为后续的子代添加E,直到到达要定位的元素.当然,你不必使用相同的元素E;你可以为任何类型,类,ID等切换,但重要的是：第一个孩子和标志.

例如,要获得其ol的第三个li,以下CSS3选择器：

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>

请注意,自there are no sibling combinators that look at preceding siblings(既不在CSS2中也不在CSS3中),您无法模仿：nth-​​last-child()或：last-child使用CSS2选择器.

此外,您只能一次对一个特定的孩子进行模拟：第n个孩子(b),其中b是公式a中的常数(如spec所述);您不能单独与相邻的兄弟组合器达成任何复杂的公式.

原文地址：https://www.jb51.cc/css/217066.html