如何用CSS定位仅含一个.formCol的formRow容器？

方法一：使用CSS :has() 伪类（推荐，现代浏览器支持） #

直接通过排除法筛选目标容器：

.formRow:not(:has(.formCol ~ .formCol)) {
  /* 你的样式 */
}

原理：.formCol ~ .formCol 会匹配存在第二个同级.formCol的情况，:not() 把这类容器排除后，剩下的就是仅包含一个.formCol的formRow，完全不受同级.clear元素的影响。

方法二：兼容旧浏览器的方案 #

如果需要适配不支持:has()的旧浏览器，可以用JavaScript辅助标记：

// 遍历所有formRow容器
document.querySelectorAll('.formRow').forEach(row => {
  // 统计容器内.formCol的数量
  const colCount = row.querySelectorAll('.formCol').length;
  if (colCount === 1) {
    // 给符合条件的容器添加自定义类
    row.classList.add('single-form-col');
  }
});

之后就可以通过自定义类写样式：

.formRow.single-form-col {
  /* 你的样式 */
}

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