如何在含通栏div的Flex双列布局中选中右侧所有div？

问题核心在于:nth-of-type(even)是基于DOM节点的顺序计数，而fullWidth类的div会打乱这个顺序，导致视觉上的右侧列和DOM的偶数位置不匹配。

解决方案 #

利用相邻兄弟选择器，精准选中所有视觉上处于右侧列的div：

.container {
  width: 300px;
  height: 400px;
  margin: 20px;
  outline: 2px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
}
.container > div {
  flex: 1 1 50%;
  outline: 1px solid bisque;
  background-color: #c5c8d5;
}
div.fullWidth {
  width:100%;
  flex-basis: 100%;
  background-color: lightsalmon
}

/* 新增：选中所有右侧列的div */
.container > div:not(.fullWidth) + div:not(.fullWidth) {
  background-color: #a5a8b5; /* 替换为你需要的右侧列样式 */
}

原理说明 #

在flex双列布局中：

• 两个连续的非fullWidthdiv会占据同一行的左右两列，第二个元素就是右侧列
• fullWidthdiv独占一行，其后方的第一个非fullWidthdiv会开启新行的左列，第二个非fullWidthdiv则是该行的右侧列

通过div:not(.fullWidth) + div:not(.fullWidth)，可以精准匹配所有符合上述条件的右侧列元素，完全不受fullWidth元素的干扰。

内容的提问来源于stack exchange，提问作者Alessandro Lo Verde