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>

然而，我期待/需要的是以下内容。实际上，我需要将last-child类添加到column-5类的每第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)主要用于元素类型，而不是您附加到它的类选择器。

您当前的选择器（class='column_5'）会选择每种类型的第5个元素，它也恰好具有h2）。它适用于所有类型的元素（也就是说，只要它们具有所需的类，它将在第5个div，第5个span，第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. } } }中选择所有元素。

中，选择器和类之间也存在不匹配，但我认为这是一个错字。

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

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

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

section

对评论的回应：

在您的情况下，每个具有该类的img元素也具有子#id *元素，因此当我们使用像img（后代选择器）这样的选择器时，它会选择并遍历所有在父母之下的元素（无论他们是孩子，孙子等）。因此，当遇到j标记时，计数器var els = document.querySelectorAll('.container > *');将重置。要避免这种情况，请使用以下行选择直接子元素：
```
script
```
在小提琴中，我选择了Frameworks＆amp;中的 onDomReady 选项。扩展（侧边栏）。在您的真实代码中，您可以将这段代码放在关闭正文标记（</body>）之前的</body>标记中，或者如果它位于外部脚本文件中，则在同一位置引用它（就在{{1}}之前）。

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>

现在你可以使用喜欢＆＃34; .blocks .column-5：nth-of-type（5n + 5）＆＃39;）。addClass（＆＃39; last-child＆＃39;）＆＃ 34 ;.这意味着.blocks的子项将被计算在内，5n + 5将在每个块中正常工作。

nth-of-type不能按需工作

2 个答案: