如何用CSS选择图片标签后的所有同级元素并设置网格布局？

要实现你需要的效果，核心是利用CSS网格布局结合兄弟选择器区分图片前后的元素，具体方案如下：

步骤1：设置父容器的网格结构 #

首先将article元素设为网格容器，定义两列布局（一列给图片，一列给后续内容）：

.homeOver article {
  display: grid;
  grid-template-columns: auto 1fr; /* 图片列自适应宽度，内容列占剩余空间 */
  gap: 2rem; /* 图片与内容的间距，可按需调整 */
  align-items: start; /* 让图片和内容顶部对齐 */
}

步骤2：让图片前的元素占满整行 #

选中图片之前的所有同级元素，让它们跨两列显示，保持原有布局：

/* 选中h2、第一段p和br元素，占满网格整行 */
.homeOver article h2,
.homeOver article p:first-of-type,
.homeOver article br {
  grid-column: 1 / -1;
}

如果你的项目兼容现代浏览器（支持CSS :has选择器），可以用更通用的写法，无需指定具体元素：

.homeOver article > *:has(+ img) {
  grid-column: 1 / -1;
}
/* 单独处理br元素 */
.homeOver article br {
  grid-column: 1 / -1;
}

步骤3：定位图片和后续元素 #

• 将图片固定在网格第一列，并设置足够的行跨度，避免内容跑到图片下方：

.homeOver article img {
  grid-column: 1;
  grid-row: 2 / span 10; /* 跨度值可根据内容长度调整 */
}

• 用通用兄弟选择器选中图片后的所有同级元素，统一放在网格第二列：

/* 匹配img之后的所有同级元素 */
.homeOver article img ~ * {
  grid-column: 2;
}

效果说明 #

• 图片之前的h2、第一段文字和换行符会正常占满整行；
• 图片固定在左侧，后续的段落、强调文本和按钮都会排列在图片右侧的网格列中，形成并排布局。

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