如何使用 CSS2 选择器获取元素的第 n 个子元素? [英] How do I get the nth child of an element using CSS2 selectors?

问题描述

有没有可能在 CSS2 中获取有序列表的第 n 个元素?

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

<小时>

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

解决方案

你可以使用 相邻兄弟组合子与 :first-child 伪类，根据需要多次重复组合器以达到某个第 n 个孩子.an answer to a different question中也提到了这一点.

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

例如，要获取其ol的第三个li，如下CSS3选择器:

ol >li:nth-child(3)

将像这样在 CSS2 中复制:

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 中都没有)，您不能使用 CSS2 选择器模拟 :nth-last-child() 或 :last-child.

此外，您一次只能为一个特定的孩子模拟 :nth-child(b)，其中 b 是公式 中的常数an+b(如 规范中所述)；您无法仅使用相邻的兄弟组合子来实现任何复杂的公式.

Is there any possibility to get the nth element of an ordered list in CSS2?

(similar to :nth-child() in CSS3)

---

FYI: I'm trying to program the German version of Parcheesi to be XHTML 1.1 and CSS2 compliant and trying to generate the playfield by using ordered lists, so movement options are predetermined by the data structure. For positioning the way around the center I'd like to select the list elements by number.

解决方案

You can use adjacent sibling combinators in conjunction with the :first-child pseudo-class, repeating the combinators as many times as you need to reach a certain nth child. This is also mentioned in an answer to a different question.

For any element E, start with E:first-child, then add + E for subsequent children until you reach the element that you're targeting. You don't have to use the same element E, of course; you could switch that out for any type, class, ID, etc, but the important bits are the :first-child and + signs.

As an example, to get the third li of its ol, the following CSS3 selector:

ol > li:nth-child(3)

Would be replicated in CSS2 like so:

ol > li:first-child + li + li

An illustration:

<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>

Note that since there are no sibling combinators that look at preceding siblings (neither in CSS2 nor CSS3), you cannot emulate :nth-last-child() or :last-child using CSS2 selectors.

Additionally, you can only emulate :nth-child(b) for one specific child at a time, where b is a constant number in the formula an+b (as described in the spec); you can't achieve any complex formulas with adjacent sibling combinators alone.

这篇关于如何使用 CSS2 选择器获取元素的第 n 个子元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！