CSS：nth-child 在添加新元素时效果不佳答案

【问题标题】：CSS: nth-child works bad when adding new elementsCSS：nth-child 在添加新元素时效果不佳
【发布时间】：2014-08-14 17:59:27
【问题描述】：

我正在制作一个照片库，每行有四个元素。

Demo

图像之间的空间有一个边距。

.picDesc {
   float: left;
   margin:0 1% 1% 0; /*  <--- this */
   width: 24.2%;
   text-align: center;
}

显然我不需要右边最后一个 div 的边距。

所以我使用 nth-child 来删除第四个 div 的边距。

.picDesc:nth-child(4n+4){
    margin:0 0% 1% 0;
}

并且有效！

但是当我点击一个专辑，例如“Altro”，并显示这张专辑的图片时，你可以看到的边距是错误的。

我该如何解决这个问题？

感谢您的帮助！

【问题讨论】：

不确定是不是想要的，但请尝试 .picDesc:nth-child(4n+1)，
它不会根据 .picDesc 计算。它将依靠 div。
将演示类 .picDesc:nth-of-type(4n+4) 更改为 .picDesc:nth-of-type(4n+1) 使照片对齐效果更好。
请给你标记正确的答案:)

标签： css css-selectors

【解决方案1】：

因为这个元素：

<div class="albumDesc"><a href="archive.php">Albums</a><p></p></div>
<!-- (Temporarily remove it and see for yourself) -->

nth-child() 承认。

将您的 <div class="picDesc"> 元素放在它们自己的容器中，然后缩小 nth-child() 范围。

例如：

HTML

<div class="albumDesc"><a href="archive.php">Albums</a><p></p></div>
<div class="picDescCont">
    <div class="picDesc">..</div>
    <div class="picDesc">..</div>
    ....
</div>

CSS

.picDescCont .picDesc:nth-child(4n+4){
    margin:0 0% 1% 0;
}

注意：.picDesc:nth-child(4n+4) 表示每个 n 元素都有 .picDesc 类，而不是每个 n 元素都有 .picDesc 类。

【讨论】：

我还建议添加nth-child(4n)，如果您想在最后一项中清除边距，这将为您提供所需的结果。
你完全正确！我觉得自己很愚蠢，非常感谢您的帮助！
@Gabriele 不用担心！很高兴有帮助:)

【解决方案2】：

这是因为nth-of-type if 对于相同的类型。所以，albumDesc 类是第一个 div。

很遗憾，nth-of-class 不存在。

您可以将albumDesc 更改为标题标题，这样更符合语义并且不需要对 div 进行分组。

<h1 class="albumDesc"><a href="archive.php">Albums</a></h1>

您必须阅读css3 nth of type restricted to class。

【讨论】：