第 n 种类型无法根据需要工作

我所知，这不能用纯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 答案没问题，因为它被标记为有问题(。

代码几乎是不言自明的，但我添加了一些内联注释以更好地理解。它将类应用于具有所需类的每个第 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. In the fiddle, I have selected the onDomReady option in Frameworks & Extensions (sidebar). In your real code, you could either put this piece of code in a script tag just before the closing body tag (</body>) or if it is in a external script file, reference it at the same place (just before </body>).

Updated Fiddle

Harry's answer is good. I also have an idea where we can still use nth-child concept. Wrap the blocks with another element. Like this:

<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 在每个块中都可以正常工作。