如何在SCSS中为后接相邻img元素的图片设置特定宽度

DevOps 小满

2026-10-1

解决方案

你可以结合CSS的:has()伪类和相邻兄弟选择器+实现需求，该方案可以完美匹配动态生成的DOM结构，无需提前预知img的位置。

实现逻辑

:has(+ img) 选中所有后面直接跟随另一个img元素的img，也就是每对相邻img的前一个元素
+ 相邻兄弟选择器选中所有前面直接跟随另一个img元素的img，也就是每对相邻img的后一个元素
两个选择器组合后只会命中连续相邻的img元素，单独存在的img不会被匹配。

SCSS代码示例

.article {
  // 单独img的默认样式，可根据需求调整
  img {
    width: 100%;
    display: block;
    margin: 12px 0;
  }

  // 匹配相邻对的第一个img
  img:has(+ img) {
    width: 49%; // 替换为你需要的指定宽度
    display: inline-block;
    margin-right: 2%;
  }

  // 匹配相邻对的第二个img
  img + img {
    width: 49%;
    display: inline-block;
    margin-right: 0;
  }
}