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

然而，我expecting/need是下面的。实际上，我需要使用 column-5 class.

将 last-child class 添加到每第 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 selector 不会在中间有不同元素时重置计数器。另请注意，nth-of-type 主要作用于元素类型，而不作用于 class select 或者您已附加到它。

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

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

该代码几乎不言自明，但我添加了一些内联注释以便更好地理解。它将 class 应用于每第 5 个具有所需 class 的元素（无论元素类型如何）。

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>

回复评论：

在您的情况下，每个具有 class 的 section 元素也有一个子 img 元素，因此当我们使用 select 或类似 #id *（后代 selector），它 select 遍历父级下的所有元素（无论它们是子级、孙级等）。因此，当遇到 img 标记时，计数器 j 将被重置。为避免这种情况，select 仅使用以下行直接子元素：
```
var els = document.querySelectorAll('.container > *');</pre>
```
在 fiddle 中，我 select 编辑了框架和扩展（边栏）中的 onDomReady 选项。在您的真实代码中，您可以将这段代码放在结束正文标记 (</body>) 之前的 script 标记中，或者如果它在外部脚本文件中，则在同一位置引用它（就在 </body> 之前）。

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 的 children 将被计算在内，并且 5n+5 在每个块中都可以正常工作。

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

nth-of-type not working as needed

html

javascript

css

jquery

css-selectors