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

Question

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

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;
}

并且有效！

但是当我点击一张专辑，例如＃34; Altro＆＃34;，并显示这张专辑的图片时，你看到的边距是错误的。

我该如何解决这个问题？

感谢您的帮助!!

Answer 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)表示具有类.picDesc的每个 n 元素，而不是具有类{的元素的每个 n 元素{1}}。

Answer 2

这是因为 nth-of-type如果是相同的类型。因此，班级albumDesc是第一个div。

不幸的是nth-of-class确实存在。

您可以将albumDesc更改为标题标题，因此更具语义性，并且不需要对div进行分组。

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

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