Question

在下面的代码中，我尝试使用nth-child将第4，第7，第10等类别放在新行上。我不确定为什么CSS代码没有响应。

＆＃13;

#categories:nth-child(3n + 1) {clear: left;}

＆＃13;

{{#if categories}}
<div id="categories">
  {{#each categories}}
  <div class="category" id="category-unit" url="{{url}}">
    <div class="category-icon"></div>
    <div class="category-name">{{name}}</div>
    <span class="category-info"></span>
  </div>
  {{/each}}
</div>
{{/if}}

＆＃13;

Answer 1

nth-child应该定位您要过滤的类/元素。您希望.category元素清除每个X项目，因此您应该定位它们而不是#categories。

#categories .category:nth-child(3n + 1) {
    clear: left;
}

演示JSFiddle。

Answer 2

首先，您需要选择#categories的子项，而不是div本身。此外，:nth-child(3n + 1)也将选择第一个元素。如果你想选择第4，第7，第10等。没有第一个，请执行此操作：

<强> CSS

＆＃13;

#categories > div:nth-child(n+4):nth-child(3n + 1) {
  background: #FF0000;
}

＆＃13;

<div id="categories">
  <div>The first paragraph.</div>
  <div>The second paragraph.</div>
  <div>The third paragraph.</div>
  <div>The fourth paragraph.</div>
  <div>The fifth paragraph.</div>
  <div>The sixth paragraph.</div>
  <div>The seventh paragraph.</div>
  <div>The eight paragraph.</div>
  <div>The ninth paragraph.</div>
  <div>The tenth paragraph.</div>
  <div>The eleventh paragraph.</div>
</div>

＆＃13;

nth-child没有使用Handlebars响应HTML

2 个答案: