nth-of-type 不能按需要工作

Question

我正在做响应式网站。我的 HTML 代码如下所示：

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

CSS 是这样的：

.column-5{width:18.4%; margin-right:2%;}
.column-5:last-child{margin-right:0;}

和我的 JS 一样

$('.column_5:nth-of-type(5n+5)').addClass('last-child')

以上代码当前产生的输出如下：

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

但是，我期望/需要的是以下内容。实际上，我需要使用 column-5 类将 last-child 类添加到每 5 个连续元素中。

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

我怎样才能做到这一点？

Answer 1

据我所知，纯 CSS 无法做到这一点，因为 nth-of-type 选择器不会在两者之间存在不同元素时重置计数器。另请注意，nth-of-type 主要作用于元素类型，而不是附加到它的类选择器。

您当前的选择器 (.column_5:nth-of-type(5n+5)) 将选择每种类型的第 5 个元素，它也恰好具有 class='column_5')。它将适用于所有类型的元素（即，只要它们具有所需的类，它将选择第 5 个h2、第 5 个div、第 5 个span 中的所有元素）。 HTML中的选择器和类之间也存在不匹配，但我认为这是一个错字。

您最好的选择是使用 JavaScript/jQuery 来实现这一点，下面是使用 JavaScript 的示例方法（我假设您可以接受 JS 答案，因为它被标记为有问题）。

代码几乎是不言自明的，但我添加了一些内联 cmets 以便更好地理解。它将类应用于具有所需类的每 5 个元素（与元素类型无关）。

window.onload = function() {
  var j = 0;
  var els = document.querySelectorAll('body *'); // Selecting all elements under parent but you can replace body with the required parent.
  for (i = 0; i < els.length; i++) { // loop through all elements
    if (els[i].className.indexOf('column-5') != -1) { // if element has class
      j = j + 1; // increment counter
      if (j % 5 == 0) // if counter = 5 or its multiple
        els[i].className += ' last-child'; //add class
    } else { // if element does not have class
      j = 0; // reset counter.
    }
  }
}

.last-child {
  background: red;
}

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

---

对评论的回应：

1. 在您的情况下，每个具有该类的 section 元素也有一个子 img 元素，因此当我们使用像 #id * （后代选择器）这样的选择器时，它会选择并遍历父母（无论他们是孩子，孙子等）。因此，当遇到img 标签时，计数器j 将被重置。为避免这种情况，请使用以下行仅选择直接子元素：

   var els = document.querySelectorAll('.container > *');

2. 在小提琴中，我选择了框架和扩展（侧边栏）中的 onDomReady 选项。在您的真实代码中，您可以将这段代码放在结束正文标记 (</body>) 之前的 script 标记中，或者如果它位于外部脚本文件中，请在同一位置引用它（就在 @ 之前987654341@)。

Updated Fiddle

Answer 2

哈利的回答很好。我也有一个想法，我们仍然可以使用 nth-child 概念。用另一个元素包裹块。像这样：

<div class="blocks">
    <h2>Title</h2>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
</div>
<div class="blocks">
    <h2>Title</h2>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
</div>

现在你可以像“.blocks .column-5:nth-of-type(5n+5)').addClass('last-child')”一样使用。这意味着 .blocks 的孩子将被计算在内，并且 5n+5 在每个块中都可以正常工作。