自 2021 年 10 月起，已指定 nth-child(n of S)（其中 S 是选择器），但据我所知，目前仅在 Safari 中实现，例如参见

对新语法的支持 非常好，因此您可以使用：

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

以及 :nth-child(An+B) 原理的误解而产生 :nth-of-type() 。

在选择器级别 3 中， :nth-child() pseudo-class 所有 元素数量 。它不会只计算与选择器其余部分匹配的兄弟元素。

类似地， :nth-of-type() pseudo-class 计算共享相同元素类型的兄弟元素，它指的是 HTML 中的标签名称，而不是选择器的其余部分。

这也意味着，如果同一父级的所有子级都属于同一元素类型，例如，在表格主体的唯一子级是 tr 元素的情况下，或者在列表元素的唯一子级是 li 元素的情况下， :nth-child() 和 :nth-of-type() 将表现相同，即，对于 An+B 的每个值， :nth-child(An+B) 和 :nth-of-type(An+B) 都将匹配同一组元素。

事实上，给定复合选择器中的所有简单选择器（包括诸如 :nth-child() 和之类 :not() 彼此独立 工作 ， 选择器其余部分匹配的元素子 集

这也意味着 ¹ 中的简单选择器之间没有顺序的概念，这意味着例如以下两个选择器是等效的：

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

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

选择 tr 满足以下所有独立条件的任意元素：

• 它是其父级的奇数子级；
• 它有 \'row\' 类；并且
• 具有类“myClass”的元素 table 的后代

^{（你会注意到我在这里使用了无序列表，只是为了强调这一点）}

选择器级别 4 试图通过允许 :nth-child(An+B of S) ²接受任意选择器参数 S 来纠正此限制，这同样是由于现有选择器语法规定的复合选择器中各选择器如何独立运行。因此，在您的例子中，它看起来应该是这样的：

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

表格中 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 等自动化测试工具或使用 BeautifulSoup 等工具抓取 HTML，其中许多工具都允许使用 XPath 作为替代方案：

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

使用不同技术的其他解决方案留给读者作为练习；这只是一个简短的、人为的例子，用于说明。

¹_{如果您指定类型或通用选择器，则必须将其放在首位。但这不会改变选择器的基本工作方式；这只不过是一种语法怪癖。}

²_{这最初被提议为:nth-match() ，但是因为它仍然只计算相对于其兄弟元素的元素，而不是相对于与给定选择器匹配的每个其他元素，所以自 2014 年起，它被重新用作现有:nth-child()的扩展。}

\'（您会注意到我在这里使用了无序列表，只是为了强调这一点）\'我希望更多人能够慎重使用有序项目符号还是无序项目符号。谢谢您的回答。

@The Red Pea：我最讨厌的 HTML 代码之一：\'按从最高/最低到最低/最高的顺序:\' 后面跟着一个无序列表。我是说，你这是认真的吗？

这不是一个误解，而是一个 CSS 功能请求，请参阅 bram.us/2020/03/16/css-nth-of-class-selector

@Ingo Steinke：这个问题并不是一个功能请求。它是基于对 :nth-child() 工作原理的误解而提出的。

并不真地..

引用文档

类 :nth-child 与文档树中之前 有 an+b-1 个兄弟元素 （n 为给定正值或零值）且具有父元素的元素匹配。

它本身就是一个选择器，不与类结合。在您的规则中，它只需同时满足两个选择器，因此 :nth-child(even) 如果表格行恰好也具有该类， .row 行。

2023答案：现在你可以！

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

通用版本（ spec ）：

:nth-child(<nth> [of <selector>]?) {}

...其中 <nth> 是 2 , 3n + 1 , -n + 3 , odd 或 其他有效值 ，并且 <selector> 是选择器列表，可能很复杂。

根据 caniuse.com 的说法 ，在撰写本文时，此功能仅受 Chrome 111+（2023/03/07，也适用于 Android）、Firefox 113+（2023/05/09，也适用于 Android）、Edge 111+（2023/03/13）和 Safari 9+（2015/10/01，也适用于 iOS） .

尝试一下：

/*** First example ***/

/* All odds (2n + 1) */
#example-1 > :nth-child(odd of .foo) {
  background: red;
}

/* Odd evens (4n + 2) */
/* Note how .foo:not(...) is evaluated first */
#example-1 > :nth-child(odd of .foo:not(:nth-child(odd of .foo))) {
  background: yellow;
}

/*** Second example ***/

/* This works */
#example-2 > :nth-of-type(3) {
  background: red;
}

/* This too */
#example-2 > :nth-child(4 of div) {
  background: yellow;
}

/* And so will this */
#example-2 > :nth-last-child(11 of div) {
  background: green;
}

/* Use :nth-last-child() to select from last */
/* First 2 of last 3 of <div>s */
#example-2 > :nth-child(-n + 2 of :nth-last-child(-n + 3 of div)) {
  background: cyan;
}

/* 1st, 4th, 7th... from last */
#example-2 > :nth-last-child(3n + 1 of div) {
  text-decoration: underline;
}

/* ...of which odd elements will be selected */
#example-2 > :nth-last-child(odd of :nth-last-child(3n + 1)) {
  outline: 3px solid black;
}

/*** Other styles ***/

.flex {
  display: flex;
  flex-flow: row wrap;
}

.grid {
  display: grid;
  grid-template: repeat(5, 1fr) / repeat(5, 1fr);
}

.flex > div,
.grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  text-align: center;
}

/* 2nd, 3rd, 4th... of both .flex and .grid */
body > :nth-child(n + 2 of .flex, .grid) {
  gap: 10px;
}

/* First 1 of [2nd, 3rd, 4th...] <div>s */
body > :nth-child(-n + 1 of :nth-child(n + 2 of div)) > div {
  background: #ddd;
}

/* 2nd of last 2 of [1st, 2nd, 3rd...] non-<script> from last */
/* ...which means 1st from last */
:nth-child(odd of :nth-last-child(-n + 3 of body > :not(script))) > .foo {
  border-radius: 50%;
}
:nth-child(odd of :nth-last-child(-n + 3 of body > :not(script))) > .foo::after {
  content: '.foo';
  display: block;
}

<div class="flex" id="example-1">
  <div>odd</div>
  <div>even</div>
  <div class="foo">1st odd</div>
  <div class="foo">1st even</div>
  <div class="foo">2nd odd</div>
  <div class="foo">2nd even</div>
  <div class="foo">3rd odd</div>
  <div class="foo">3rd even</div>
</div>

<hr>

<div class="flex" id="example-2">
  <div>1 (15)</div>
  <div class="foo">2 (14)</div>
  <div>3 (13)</div>
  <div class="foo">4 (12)</div>
  <div>5 (11)</div>
  <div>6 (10)</div>
  <div class="foo">7 (9)</div>
  <div>8 (8)</div>
  <div>9 (7)</div>
  <div class="foo">10 (6)</div>
  <div class="foo">11 (5)</div>
  <div>12 (4)</div>
  <div class="foo">13 (3)</div>
  <div>14 (2)</div>
  <div>15 (1)</div>
</div>

nth-of-type 根据元素相同类型的索引工作，但 nth-child 无论兄弟元素是什么类型，都只能根据索引工作。

例如

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>

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

在这种情况下 nth-child ，工作 nth-of-type 方式完全相同，因为所有元素都是同一类型，所以 <div> css 应该是

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

或者

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

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<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 你必须像这样写

.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 可以是这样的

.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;
}

由于 .rest 元素的类型是， <p> 所以这里 nth-of-type 检测的类型 .rest ，然后他在第 1、第 2、第 3、第 4、第 5 个元素上应用 css <p> .

您可以使用 xpath 来做到这一点。类似这样的方法可能 //tr[contains(@class, 'row') and position() mod 2 = 0] 会有效。还有其他 SO 问题扩展了如何更精确地匹配类的细节。

这是你的答案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEST</title>

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

<h1>Should be the 6th Hello Block that start red</h1>
<div class="small large">
  <div class="block small-item">Hello block 1</div>
  <div class="block small-item large-item">Hello block 2</div>
  <div class="block small-item large-item">Hello block 3</div>
  <div class="block small-item large-item">Hello block 4</div>
  <div class="block small-item large-item">Hello block 5</div>
  <div class="block small-item large-item">Hello block 6</div>
  <div class="block small-item large-item">Hello block 7</div>
  <div class="block small-item large-item">Hello block 8</div>
</div>

</body>
</html>

所有关于使用 nth-child 和跳过隐藏标签的问题似乎都重定向为这个问题的重复，所以我将这个问题留在这里。我偶然发现了这个博客 https://blog.blackbam.at/2015/04/09/css-nth-child-selector-ignore-hidden-element/ ，它使用一种巧妙的 css 方法使 nth-child 忽略隐藏元素，如下所示：

以下 CSS 为每个第二个可见元素添加一个右外边距，无论哪个元素具有 cpw 类。

.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;
}

希望这能帮助那些正在追踪忽略隐藏元素问题的人们！

我记得这实际上并不像最初看起来那么强大——我现在会选择获得最高投票的评论，这是不可能的。

如果所有选择器都有相同的父类，则使用那个类， document.querySelector("main .box-value:nth-child(3) select.priorityOption"); 因为在这种情况下 document.querySelector("main .box-value select.priorityOption:nth-child(3)"); 不起作用。谢谢

<div class="card table">
    <div class="box">
        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>
    </div>
</div>

这里的主要问题是您尝试以编程方式执行任意操作，但根据定义，该操作没有可预测的逻辑。

是的，接受的答案 table.myClass tr:nth-child(odd of .row) 将完成任务，并满足您的迫切需求，但实际的解决方案只能从 您跳过第一个表行的 原因

我假设你跳过了第一行，因为它实际上是一个表头，在这种情况下，你的表格格式不正确

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row">
    <td>Row
</table>

更正确的格式是

<table class="myClass">
  <thead>
    <tr>
      <th>Row
  <tbody>
    <tr class="row">
      <td>Row
    <tr class="row">
      <td>Row
    <tr class="row">
      <td>Row
</table>

然后可以使用选择器实现所需的效果 table.myClass tbody .row:nth-child(odd)

这太愚蠢了...这需要更多的工作，如果我可以使用新的语法，为什么还要这样做呢？

1. 通用浏览器支持
2. 使整个网站的样式行为更加可预测
3. 更好的 SEO
4. 更佳可达性
5. CPU 占用低

没有回答“有人能解释一下为什么吗？”因为其他答案已经解释过了。

但是，作为解决您情况的一种可能方法，您可以为行和单元格使用自定义标签，例如 <tr-row> , <td-row> ，这样 :nth-of-type() 就可以了。不要忘记分别设置样式 display: table-row; 和， display: table-cell; 以使它们仍然像表格单元格一样工作。