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

Question

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

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

---

仅供参考:我正在尝试将德国版Parcheesi编程为XHTML 1.1和CSS2兼容并尝试使用有序列表生成播放场,因此移动选项由数据结构预先确定.为了围绕中心定位,我想按编号选择列表元素.

Answer 1

您可以将相邻的兄弟组合器与:first-child伪类一起使用,根据需要重复组合器多次以达到某个第n个孩子.在回答另一个问题时也提到了这一点.

对于任何元素E,请先开始E:first-child,然后+ E为后续子项添加,直到找到您要定位的元素.当然,您不必使用相同的元素E; 你可以为任何类型,类,ID等切换出来,但重要的部分是:first-child和+标志.

作为一个例子,以获得第三li它的ol,下面的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>

需要注意的是,因为没有那个看兄弟组合子前面的兄弟姐妹(无论是在CSS2也不CSS3),你不能模仿:nth-last-child()或:last-child使用CSS2选择.

此外,您一次只能模拟:nth-child(b)一个特定的孩子,其中b公式中的常数an+b(如规范中所述); 你不能单独使用相邻的兄弟组合器来实现任何复杂的公式.