css - 连续两个元素，如何同时选择它们？

Question

我正在制作一个图片较多的博客。我认为设置一些 CSS 会很好，这样如果两个图像一个接一个地插入到帖子中，它会并排显示它们。如果只插入一个，则全 Angular 显示。

我正在努力寻找一种将样式应用于这两个元素的方法。当然，如果总是有两张图片，我可以执行以下操作:

span>img, span>img+img {宽度: 50%;}

但是如果只有一张图片，那么 span>img 会将其设为半 Angular 而不是全 Angular 。我无法更改代码结构。这是一个 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;}