Question

我正在制作一个影像重量级的博客。我认为设置一些CSS会很好，如果两个图像一个接一个地插入一个帖子中，它会并排显示它们。如果只插入一个，则显示全宽。

我正在努力寻找将样式应用于两个元素的方法。当然，如果总有两张图片，我可以做以下事情：

span>img, span>img+img {width: 50%;}

但是，如果只有一个图像，则span>img使其为半宽而不是全宽。我无法改变代码结构。这是Shopify博客，我希望客户端尽可能简单地使用内置编辑器。

感谢任何帮助。

Answer 1

我一发布这个问题，就找到了答案。 CSS3有一个惊人的:only-child选择器。

我的解决方案：

span>img:only-child {width: 100%;}
span>img, span>img+img {width: 50%;}
span>img {padding-right: 10px;}
span>img+img {padding-left: 10px;}

Answer 2

最好的方法是使用一个CSS框架，它有一个网格系统，用于处理这种情况，如Bootstrap或Foundation。但如果那不是你想要的......

我认为最简单的方法是使用JQuery：

var numOfImages = $(".some_class > img").length

可以获得嵌套在＆＃34; some_class中的图像数量。＆＃34;

然后你可以检查图像的数量并应用一个完全符合你想要的CSS类：

if(numOfImages > 1) {
     $(".some_class > img").css('formattingClass');
}

你的formattingClass可以是任何CSS：

.formattingClass {
     width: 50%;
}

如果您不想使用jQuery，也可以使用普通JS完成所有这些操作。

Answer 3

我希望这是你需要的。

您可以选择:nth-child()选择器为不同的子计数使用不同的样式。这是你如何做到的：

/* one item */
li:nth-child(1):nth-last-child(1) {
    width: 100%;
}

/* two items */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
    width: 50%;
    float: left;
}

因此，如果您想为三个孩子设置一个自己的选择器，则必须添加一个额外的nth-child，如下所示：

/* three items */
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
    float: left;
}

你可以继续增加孩子的数量。您可以在此处详细了解：Styling elements based on sibling count

这里有一些小巧的照片：JSFiddle

连续两个元素，我该如何选择它们？

3 个答案: