Question

在某些文章文字中，图片包含在p.img个标签中，这些标签分别是带有边框和一些填充的顶部和尾部：

p.img {
    border-top: 1px dotted #414042;
    border-bottom: 1px dotted #414042;
    padding-top: 20px;
    padding-bottom: 20px;
}

然而，当一堆图像连续出现时，就像这样：

<p class="img"><img ...></p>
<p class="img"><img ...></p>
<p class="img"><img ...></p>
<p class="img"><img ...></p>

我只希望padding-top和border-top适用于组中的第一个p.img，padding-bottom和border-bottom适用于该组中的最后一个p.img组。 `p.img'需要删除所有边框和填充。

我尝试使用p.img + p.img个相邻选择器进行试验，但我不能影响该组中的第一个和最后一个p.img。

如果有人可以帮助我使用CSS来实现这一目标，那将是很好的，在我诉诸JS之前。

修改一些人建议我使用first-child和last-child选择器，但我不想影响任何不属于一组相邻p.imgs的p.img。即这不起作用（在sass中）

p.img + p.img {
        border-top: 0;
        border-bottom: 0;
        padding-top: 0;

        &:first-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        &:last-child {
            border-top: 0;
            padding-top: 0;
        }

    }

我的文章可能如下所示：

article 
    p
    p
    p.img
    p
    p.img
    p.img
    p.img
    p

这只是我想要风格的三人组中的p.img;不是第一个，个人的。

Answer 1

你能用css3吗？（即你需要支持旧版本的IE吗？）

如果可以，您可以使用:first-child and :last-child选择器。

这些将完全符合您的要求，但在IE8中为are lacking support.并向下。

Answer 2

p.img {
    border-top: 1px dotted #414042;
    border-bottom: 1px dotted #414042;
    padding-top: 20px;
    padding-bottom: 20px;
}

p.img:first-child {
    padding-top: 40px;
}

p.img:last-child {
    padding-bottom: 40px;
}

Answer 3

假设你有一个平坦的背景颜色，你可以使用负边距和一个坚实的顶部边框来掩盖之前p点缀的底部边框：

p {
  margin: 0 0 20px;
}
p.img {
  border-top: 1px dotted #414042;
  border-bottom: 1px dotted #414042;
  padding: 20px 0;
}
p.img+p.img {
  margin-top: -21px;
  border-top: 1px solid #fff;
  padding-top: 0;
}

其中#fff是您的背景颜色。演示链接：http://jsfiddle.net/n7P5d/

Answer 4

您可能需要尝试:first-of-type和:last-of-type选择器。

正如Andy所说，浏览器支持将是你的关键点。

http://caniuse.com/#feat=css-sel3

Answer 5

现在您已更新它，并查看您的文章结构，您是否始终知道图像的分组方式？如果它的手册不能你只是添加一些额外的CSS并创建一个新的类，如：

p.img {

}

p.img-first { 边境顶： {

p.img-last { 底部边框： }

所以你的文章现在是：

文章 p p p.img p p.img一 p.img p.img，最后 P

但是，如果它不是手动的并且您不确定图像将如何显示，那么JS只是选项。

使用CSS在相邻元素块中构造元素

5 个答案: