问：

有没有办法选择与任意选择器匹配（或不匹配）的每个 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>

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

有人可以解释为什么吗？

css css-selectors

这也意味着，如果同一父项的所有子项都属于相同的元素类型，例如，表体中唯一的子项是元素，或者列表元素的唯一子项是元素，则和将具有相同的行为，即对于 An+B 的每个值，并且将匹配同一组元素。trli:nth-child():nth-of-type():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

它是其父项的奇数子项;

它有类“row”;和

它是具有类“myClass”的元素的后代。table

^{（你会注意到我在这里使用了无序列表，只是为了把重点带回家）}

选择器级别 4 试图通过允许 ：nth-child（An+B of S）² 接受任意选择器参数 S 来纠正此限制，这同样是由于选择器在复合选择器中如何独立运行，由现有选择器语法决定。因此，在您的情况下，它看起来像这样：

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

您还可以使用脚本来筛选元素并相应地应用样式或额外的类名。例如，以下是使用 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 等自动化测试工具，或者使用 BeautifulSoup 等工具抓取 HTML，其中许多工具都允许使用 XPath 作为替代方案：

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

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

¹ _{如果指定类型或通用选择器，则必须将其放在首位。然而，这并没有从根本上改变选择器的工作方式;这只不过是一种句法上的怪癖。}

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

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

1赞 IrishDubGuy 9/11/2019 #6

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

以下 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;
}

希望这对那些正在追随忽略隐藏元素问题的人有所帮助！

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

-1赞 Yidi Tool 7/21/2021 #8

不是“有人能解释为什么吗？”的答案，因为其他答案已经解释了。

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

1赞 InSync 3/24/2023 #9

2023 年答案：现在你可以了！

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

通用版本（规格）：

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

...其中是、、或其他有效值，并且是选择器列表，这可能很复杂。<nth>23n + 1-n + 3odd<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>

上一个：在 CSS Flexbox 中，为什么没有 “justify-items” 和 “justify-self” 属性？

下一个：如何禁用文本选择突出显示

我可以将：nth-child（）或：nth-of-type（）与任意选择器结合使用吗？

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

评论

评论

评论

评论

2023 年答案：现在你可以了！

我可以将 ：nth-child（） 或 ：nth-of-type（） 与任意选择器结合使用吗？

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

评论

评论

评论

评论

2023 年答案：现在你可以了！

我可以将：nth-child（）或：nth-of-type（）与任意选择器结合使用吗？