Question

我有一些<img>标签，它将通过php代码加载一些图像。

以下代码：

<div class="images_cd">
    <img src="<?php the_field('case_image9'); ?>" alt="" />
<img src="<?php the_field('case_image9'); ?>" alt="" />
<img src="<?php the_field('case_image10'); ?>" alt="" />
</div>

我想为每个img标签添加50 px padding-bottom，但对于最后一个，我没有填充。

这是我的CSS：

.images_cd{

}
.images_cd img{
    margin-bottom: 50px;
}
.images_cd img:last-of-type{
    margin-bottom: 0px;
}

但是最后一个img仍然获得50px填充以及0填充。事情是-50 px也不适用于此。

有什么问题？

Answer 1

使用

.images_cd img:last-child { }

代替

Answer 2

我按照书面的方式复制了您的代码，但添加了一些大纲，以便您可以看到内容并且工作正常。

.images_cd{
    width:400px;
    border:1px solid blue;
}
.images_cd img{
    margin-bottom: 50px;
    width:100px;
    height:100px;
    border:1px solid red;
}
.images_cd img:last-of-type{
    margin-bottom: 0px;
}

你可以看到它here并确认最后一个img没有margin-bottom。

我的猜测是其他东西必须覆盖CSS规则。

带有一些img标签的最后一个问题

2 个答案: