如何选中连续两个元素？图片密集型博客CSS布局求助

嘿，这个需求太常见了！我之前帮不少博客作者解决过类似的布局问题，给你几个实用的方案，从纯CSS到JS辅助的都有，你可以根据自己的需求选：

方案1：现代浏览器首选——用:has()选择器精准匹配 #

这个方案写法最简洁，而且现在Chrome、Firefox 121+、Safari等主流现代浏览器都支持:has()特性了：

首先给单张图片设置全屏宽度：

img {
  width: 100%;
  max-width: 100%; /* 防止图片超出容器 */
  margin-bottom: 1rem; /* 可选，增加图片下方间距 */
}

然后精准选中连续两张图片中的第一张和第二张，把它们的宽度改成50%：

/* 选中后面紧跟着另一张图片的图片（连续中的第一张） */
img:has(+ img) {
  width: 47.5%;
  margin-right: 5%; /* 两张图片之间的间距 */
}

/* 选中前面是一张图片的图片（连续中的第二张） */
img + img {
  width: 47.5%;
}

这里用47.5%而不是50%，是为了给两张图片留间距，如果你不需要间距，直接设成50%就行。

方案2：兼容旧浏览器的纯CSS写法 #

如果你的博客需要兼容旧版Firefox、IE这类不支持:has()的浏览器，可以用这个技巧：

/* 默认单张图片全屏 */
img {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}

/* 选中连续两张中的第二张，设置宽度 */
img + img {
  width: 47.5%;
  margin-left: 5%;
  float: left; /* 让两张图片并排 */
}

/* 选中连续两张中的第一张，设置宽度 */
img:not(:last-child):nth-child(odd) {
  width: 47.5%;
  float: left;
}

/* 清除浮动，避免影响后续内容 */
img:last-child {
  clear: both;
}

这个写法利用了浮动和:nth-child选择器，虽然不如:has()简洁，但能兼容大部分旧浏览器。

方案3：兼容性拉满的JS辅助方案 #

如果担心CSS选择器的兼容性问题，用几行JS来给连续的图片标记类名是最稳妥的：

// 获取页面中所有图片元素
const allImgs = document.querySelectorAll('img');

allImgs.forEach((img, index) => {
  // 检查当前图片的下一个兄弟元素是否也是图片
  const nextEl = img.nextElementSibling;
  if (nextEl && nextEl.tagName === 'IMG') {
    // 给当前图片和下一张图片添加配对类
    img.classList.add('paired-img');
    nextEl.classList.add('paired-img');
  }
});

然后在CSS里针对这个类设置样式：

img {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}

.paired-img {
  width: 47.5%;
}

.paired-img:first-of-type {
  margin-right: 5%;
}

/* 移动端适配：小屏幕下恢复全屏 */
@media (max-width: 768px) {
  .paired-img {
    width: 100%;
    margin-right: 0;
  }
}

这个方法不管什么浏览器都能正常运行，还方便后续扩展样式。

另外提个小建议：如果你的图片高度不一致，可以给图片加上object-fit: cover或者object-fit: contain来保持统一的显示比例，让布局更整洁~

内容的提问来源于stack exchange，提问作者nebulousecho