1

在某些文章文本中，图像被包裹在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组中的第一个和最后一个。

在我求助于 JS 之前，如果有人可以帮助我仅使用 CSS 实现这一点，那就太好了。

编辑 一些建议我使用第一个孩子和最后一个孩子选择器，但我不想影响任何不属于一组相邻 p.img 的 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；不是第一个，个人的。

4

5 回答 5

2

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

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

这些将完全符合您的要求，但缺乏支持。在 IE8 及以下。

于 2012-11-28T12:29:10.470 回答
1 
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;
}
于 2012-11-28T12:35:03.370 回答
1

假设你有一个平坦的背景颜色，你可以负边距和一个实心的顶部边框来覆盖之前p的 s 虚线底部边框：

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/

于 2012-11-28T12:49:25.350 回答
0

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

正如安迪所说，浏览器支持将是你的症结所在。

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

于 2012-11-28T12:32:27.807 回答
0

现在你已经更新了它，看看你的文章结构，你会一直知道图像是如何分组的吗？如果它是手动的，你不能只添加一些额外的 css 并创建一个新类，例如：

p.img {

}

p.img-first { 边界顶部：{

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

所以你的文章现在是：

文章 p p p.img p p.img-first p.img p.img-last p

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

于 2012-11-28T12:46:54.263 回答