是否有可能在CSS2中获得有序列表的第n个元素?
(类似于:nth-child()CSS3)
:nth-child()
仅供参考:我正在尝试将德语版本的Parcheesi编程为XHTML 1.1和CSS2兼容,并尝试通过使用有序列表来生成运动场,因此移动选项由数据结构预先确定。为了围绕中心定位,我想通过数字选择列表元素。
您可以将相邻的同级组合器与:first-child伪类一起使用,重复组合器的次数可以达到第n个孩子。
:first-child
对于任何元素E,均以开头E:first-child,然后+E为后续子项添加,直到找到要定位的元素。当然,您不必使用相同的元素E;您可以将其切换为任何类型,类,ID等,但是重要的位是:first-child和+符号。
E
E:first-child
+E
+
例如,要获取li其olCSS3选择器的第三个:
li
ol
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-last-child()
:last-child
此外,您一次只能模拟:nth-child(b)一个特定的孩子,其中b的公式中an+b为常数(如规范中所述);仅靠相邻的兄弟组合器就无法实现任何复杂的公式。
:nth-child(b)
b
an+b