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

我可以将:nth-​​child()或:nth-​​of-type()与任意选择器结合使用吗?

邹山
2023-03-14
问题内容

有没有办法选择 匹配(或不匹配)任意选择器的 第n个孩子?例如,我要选择每个奇数表行,但要在行的子集内:

table.myClass tr.row:nth-child(odd) {
  ...
}



<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

但是,无论它们是否属于“ row”类,:nth-child()似乎似乎都在计算所有tr元素,因此我最终得到了一个 偶数
row”元素,而不是我要寻找的两个元素。发生同样的事情:nth-of-type()

有人可以解释为什么吗?


问题答案:

由于对工作方式:nth-child():nth-of- type()工作的误解,这是一个非常普遍的问题。不幸的是,目前还没有基于选择的解决方案至今,因为选择器不提供一种方法来匹配基础上的模式,如奇数,偶数或任意选择相匹配的第n个孩子an+b,其中a != 1b != 0。这不仅限于类选择器,还包括属性选择器,取反和简单选择器的更复杂组合。

:nth-child()伪类计算中的元素
在同一母公司下的兄弟姐妹。它不只计算与选择器其余部分匹配的兄弟姐妹。类似地,:nth-of- type()伪类计数共享相同元素类型的兄弟姐妹,该元素类型引用HTML中的标签名称,而不是选择器的其余部分。

这也意味着,如果同一父级的所有子级都具有相同的元素类型,例如,在表体中其唯一的子级是tr元素,或者列表元素的唯一的子级是li元素,则:nth-child()并且:nth-of-type()将具有相同的行为,即对于每一个值an+b:nth-child(an+b)并且:nth-of-type(an+b)将匹配相同的一组元素。

实际上,给定复合选择器中的所有简单选择器,包括诸如:nth-child()和等伪类:not(),都彼此 独立
工作,而不是查看与选择器其余部分匹配的元素 子集

这也意味着 在每个单独的复合选择器 1 中的简单选择器之间没有顺序的概念 ,这意味着例如以下两个选择器是等效的:

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

翻译成英文,它们的意思是:

选择tr符合以下所有独立条件的任何元素:

  • 它是其父代的奇数子代;
  • 它具有“行”类;和
  • 它是table具有“ myClass”类的元素的后代。

(您会注意到我在这里使用的是无序列表,只是为了将要点指向家)

因为目前还没有纯CSS解决方案,所以您必须使用脚本来过滤元素并相应地应用样式或额外的类名。例如,以下是使用jQuery的常见解决方法(假设在表中仅填充了一个行组tr):

$('table.myClass').each(function() {
  // Note that, confusingly, jQuery's filter pseudos are 0-indexed
  // while CSS :nth-child() is 1-indexed
  $('tr.row:even').addClass('odd');
});

使用相应的CSS:

table.myClass tr.row.odd {
  ...
}

如果您使用诸如Selenium之类的自动化测试工具,或者使用诸如lxml之类的工具来处理HTML,则其中许多工具都可以将XPath用作替代方法:

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

其他使用不同技术的解决方案留给读者练习。这只是一个简短的,人为的示例。

对于它的价值,有人提议将:nth-child()表示法的扩展添加到选择器级别4中,以达到选择与给定选择器匹配的第n个子代的特定目的。2:nth-child()同样,由于选择器如何按照现有选择器语法规定的顺序彼此独立地操作,因此将筛选器用来匹配的选择器作为的参数提供。因此,在您的情况下,它看起来像这样:

table.myClass tr:nth-child(odd of .row)

(精明的读者会立即注意到,应该这样做:nth-child(odd of tr.row),因为简单的选择器tr:nth- child()彼此独立运行。这是接受选择器的功能性伪类的问题之一,我会选择一堆蠕虫相反,我将假设大多数站点tr在表主体中除了元素作为彼此的同级元素外,将不具有其他任何元素,这将使两个选项在功能上都等效。)

当然,作为全新规范中的全新提案,可能要等到几年后才能实现。同时,您必须坚持使用脚本,如上所述。

1 如果指定类型或通用选择器,则必须排在最前面。但是,这不会改变选择器的基本工作方式。这不过是句法上的怪癖。

2 最初被提议为:nth-match(),但是因为它仍然仅相对于其同级而不是与给定选择器匹配的所有其他元素都相对于一个元素进行计数,因此自2014年起,该元素已被重新用作现有元素的扩展:nth-child()



 类似资料:
  • 本文向大家介绍css3的:nth-child和:nth-of-type的区别是什么?相关面试题,主要包含被问及css3的:nth-child和:nth-of-type的区别是什么?时的应答技巧和注意事项,需要的朋友参考一下 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素。 n

  • 问题内容: 除非不应该这样,但我似乎无法承认类选择器。 我在另一个div内说了4个div,所有的类和id都在上面。我需要选择具有该类的div的第一个实例。例如: 并且显然再次获得相同的效果,但它不会影响任何div。 现在,如果我要强制它与该div一起使用,我可以这样做: 碰巧它是#content中的第3个div,这毫无意义,因为我需要使用该类获取任何东西的第一个实例。 这是HTML的示例,我已经尝

  • 问题内容: 以以下代码为例: 是否可以使用或不选择全部元素的 一半 ?在上面的例子中,代码应该选择前/后 两个 s,然后如果我将s 的数量增加到六个,它将选择前/后 三个 。 我觉得我将不得不使用JavaScript … 问题答案: 在纯CSS中,您能够获得与之 接近 的唯一方法是对或进行选择。如果您只需要最后一半(而不是奇数或偶数),则必须使用JavaScript / jQuery。 使用jQu

  • 问题内容: 我正在尝试更改div内奇数div的样式。由于某种原因,当它位于另一个div内时,它会影响我的所有div。这是我的常规div和奇数div的代码: 出于某种原因,当将其包裹在我的div中时不起作用,但是当它们不包裹在任何div中时却起作用。 未包装在div中时的工作版本: ``如何使初始代码与上述代码相同? 问题答案: 类似于它们必须全部来自同一父级。如果需要这些包装器,请改用这些包装器:

  • 问题内容: 这是我的CSS: 工作,现在到处(用这个在我的网站),除了Internet Explorer 8中...... 是否有可能在IE8中使用nth-child?这是该浏览器的最差版本,无法正常工作,我找不到解决方法。 @ edit2:我刚刚注意到 实际上是在IE8中工作!但是这个: 不管用。那么发生了什么? 问题答案: 您可以(ab)使用相邻的同级组合器()通过可在IE7/ 8中使用的CS

  • 本文向大家介绍举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?相关面试题,主要包含被问及举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?时的应答技巧和注意事项,需要的朋友参考一下 :nth-child(n): 选择当前元素的父元素下的第n个子元素(从1开始) :nth-of-type