如何从.edit-upper-div类出发选择父元素以修改指定flex元素？

首先明确：标准CSS中没有直接从子元素选择父元素的选择器（类似你假设的<这种反向选择器目前不存在）。针对你的场景，给两个可行方案：

方案1：用JavaScript实现精准控制 #

因为你只能编辑.edit-upper-div所在的绿色区域，可通过JS找到该元素的父元素，再定位到蓝色圈选的flex元素修改样式：

// 获取可编辑区域的元素
const editDiv = document.querySelector('.edit-upper-div');
if (editDiv) {
  // 获取其父元素
  const parentContainer = editDiv.parentElement;
  // 定位到蓝色圈选的flex元素（替换成实际的类名）
  const targetFlexItem = parentContainer.querySelector('.blue-target-class');
  if (targetFlexItem) {
    // 修改flex相关样式，示例：
    targetFlexItem.style.flexGrow = '0';
    targetFlexItem.style.flexBasis = '150px';
  }
}

将这段脚本添加到你能控制的区域（比如绿色区域的底部），即可实现对目标元素的样式修改。

方案2：利用CSS :has()选择器（需浏览器兼容） #

如果你的CMS支持现代CSS，且目标蓝色元素和.edit-upper-div同属一个父容器，可以用:has()选择器间接定位：

/* 选择包含.edit-upper-div的父容器，再选中其中的蓝色目标元素 */
.parent-container:has(.edit-upper-div) .blue-target-class {
  flex: 0 0 150px;
  /* 其他需要修改的样式 */
}

注意：:has()选择器在IE及部分旧版浏览器中不支持，需确认你的用户群体浏览器版本覆盖情况。

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