关于CSS：我可以将：nth-child()或：nth-of-type()与任意选择器结合使用吗？


Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

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

1
2
3
table.myClass tr.row:nth-child(odd) {
  ...
}
1
2
3
4
5
6
7
8
9
10
<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>

但是:nth-child()似乎只是计算所有tr元素，无论它们是否属于" row"类，因此我最终得到一个偶数" row"元素，而不是我要寻找的两个 。 :nth-of-type()也会发生相同的情况。

有人可以解释为什么吗？

这是由于对:nth-child()和:nth-of-type()的工作方式的误解而引起的非常常见的问题。不幸的是，目前还没有基于选择器的解决方案，因为选择器还没有提供一种方法来匹配第n个与基于奇数，偶数或任何an+b(其中a != 1 >和b != 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中的简单选择器之间没有顺序的概念，这意味着例如以下两个选择器是等效的：

好。

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

翻译成英文，它们的意思是：

好。

Select any tr element that matches all of the following independent conditions:

Ok.

  • it is an odd-numbered child of its parent;
  • it has the class"row"; and
  • it is a descendant of a table element that has the class"myClass".

    • Ok.

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

    好。

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

    好。

    1
    2
    3
    4
    5
    $('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：

    好。

    1
    2
    3
    table.myClass tr.row.odd {
      ...
    }

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

    好。

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

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

    好。

    对于它的价值，有人建议对选择器级别4添加:nth-child()表示法的扩展，用于选择与给定选择器匹配的第n个孩子的特定目的。2

    好。

    再次由于选择器如何按照现有选择器语法规定的顺序彼此独立地操作而提供了作为:nth-child()的参数的筛选器。因此，在您的情况下，它看起来像这样：

    好。

    1
    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()代替。

    好。

    好。

    相关讨论

    并不是的..

    引用文档

    The :nth-child pseudo-class matches an
    element that has an+b-1 siblings
    before it in the document tree, for a
    given positive or zero value for n,
    and has a parent element.

    它是自己的选择器，不与类组合。在您的规则中，它只需要同时满足两个选择器，因此，如果它们同时具有.row类，它将显示:nth-child(even)表行。

    有关使用nth-child和跳过隐藏标签的所有问题似乎都被重定向为该对象的重复对象，因此我将其留在此处。我遇到了这个博客https://blog.blackbam.at/2015/04/09/css-nth-child-selector-ignore-hidden-element/，该博客使用聪明的CSS方法使nth-child忽略隐藏的元素，如下：

    无论哪个元素具有cpw类，以下CSS都会向每个第二个可见元素添加边距权限。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .cpw {
        display:none;
    }

    .video_prewrap {
        margin-right:20px;
    }

    .video_prewrap:nth-child(2n) {
        margin-right:0;
    }

    .cpw ~ .video_prewrap:nth-child(2n) {
        margin-right:20px;
    }

    .cpw ~ .video_prewrap:nth-child(2n-1) {
        margin-right:0;
    }

    希望这对跟随重复路径的人提供帮助，以解决忽略隐藏元素的问题！

    这是你的答案

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      TEST

      <style>

        .block {
          background: #fc0;
          margin-bottom: 10px;
          padding: 10px;
        }
        /* .large > .large-item:nth-of-type(n+5) {
          background: #f00;
        } */

        .large-item ~ .large-item ~ .large-item ~ .large-item ~ .large-item {
          background: #f00;
        }

      </style>
    </head>
    <body>

    Should be the 6th Hello Block that start red

      Hello block 1
      Hello block 2
      Hello block 3
      Hello block 4
      Hello block 5
      Hello block 6
      Hello block 7
      Hello block 8


    </body>
    </html>

    您也许可以使用xpath做到这一点。 //tr[contains(@class, 'row') and position() mod 2 = 0]之类的东西可能起作用。还有其他SO问题扩展了如何更精确地匹配类的细节。

    nth-of-type根据元素的相同类型的索引工作，但nth-child仅根据索引的类型工作，无论同级元素是什么类型。

    例如

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...

    假设在上面的html中，我们想隐藏所有具有rest类的元素。

    在这种情况下，nth-child和nth-of-type将完全相同，因为所有元素都是与相同的类型，因此css应该是

    1
    2
    3
    .rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
        display:none;
    }

    要么

    1
    2
    3
    .rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){
        display:none;
    }

    现在您一定想知道nth-child和nth-of-type有什么区别，所以这就是区别

    假设html是

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ...
    ...
    ...
    ...
    ...
    <p class="rest">...
    </p>
    <p class="rest">...
    </p>
    <p class="rest">...
    </p>
    <p class="rest">...
    </p>
    <p class="rest">...
    </p>

    在上面的html中，.rest元素的类型不同于其他元素，而.rest是段落，其他元素是div，因此在这种情况下，如果使用nth-child，则必须这样编写

    1
    2
    3
    .rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
        display:none;
    }

    但是如果您使用nth-of-type css可以这样

    1
    2
    3
    .rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
        display:none;
    }

    As type of .rest element is

    so here nth-of-type is detecting the type of .rest and then he applied css on the 1st, 2nd, 3rd, 4th, 5th element of

    .

    相关讨论