当前位置: 首页 > 面试题库 >

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

端木元青
2023-03-14
问题内容

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

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

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


问题答案:

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

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

例如,要获取liolCSS3选择器的第三个:

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



 类似资料:
  • 我试着练习用CSS选择器获取值,我想出了这个(不像预期的那样工作) (我也尝试过) 我对的期望:第三个没有id属性和data-ad-show属性的元素被选中,其值将是所需的值3。

  • 返回数组的第n个元素。 使用 Array.slice() 获取数组的第 n 个元素。如果索引超出范围,则返回 [] 。省略第二个参数 n ,将得到数组的第一个元素。 const nthElement = (arr, n = 0) => (n > 0 ? arr.slice(n, n + 1) : arr.slice(n))[0]; nthElement(['a', 'b', 'c'], 1);

  • 问题内容: 我很难找到从jquery选择器中获取实际DOMElement的时间。样例代码: 在另一段代码中,我试图确定复选框的选中值。 而且,我不想做: 这使我无所适从,但有时我需要真正的DOMElement。 问题答案: 您可以使用以下方法访问原始DOM元素: 或更简单地说: 实际上,根据我的经验,实际上并不需要很多。以您的复选框为例: 更“ jquery’ish”和(imho)更简洁。如果要给

  • 本文向大家介绍jQuery 选择元素的子元素,包括了jQuery 选择元素的子元素的使用技巧和注意事项,需要的朋友参考一下 示例 要选择元素的子代,可以使用children()方法。 更改元素所有子.parent元素的颜色: 该方法接受一个可选selector参数,该参数可用于过滤返回的元素。            

  • 问题内容: 我想找到相应的span元素。我想使用css选择器检查span元素的顺序。因此,当我使用Selenium IDE时,我将按照以下方式进行验证(使用第n个子概念)。 verifyText | css = .title:nth(0)| 首页 verifyText | css = .title:nth(1)| 帖子 verifyText | css = .title:nth(2)| 事件 ve

  • 根据以下示例HTML查找元素下面的元素: