如何仅用CSS实现a标签hover/visited时修改前置兄弟label样式

原生CSS目前没有支持直接选中前置兄弟元素的选择器，CSS选择器遵循DOM从上到下的匹配规则，仅支持选中元素的后代、后续兄弟元素。可以通过以下两种变通方案实现需求：

方案1：调整DOM顺序 + Flex布局排序（推荐，无副作用） #

仅调整DOM元素的书写顺序，通过CSS的flex order属性保证视觉顺序和原来一致，就可以用后续兄弟选择器~匹配到label元素：

修改后DOM结构 #

<div class="outer">
  <a class="content" href="........">
     // a lot of different divs in here
  </a>
  <!-- 把label移到content后面 -->
  <div class="label">
     Label
  </div>
</div>

对应CSS #

/* 父容器开启flex，纵向排列 */
.outer {
  display: flex;
  flex-direction: column;
}
/* 把label提到最前面显示，视觉顺序和原来完全一致 */
.label {
  order: -1;
}

/* hover时修改label样式 */
.content:hover ~ .label {
  /* 填写你需要的样式，例如 */
  color: red;
}
/* visited时修改label样式 */
.content:visited ~ .label {
  /* 注意：浏览器隐私限制下，:visited仅支持修改color、background-color、border-color等少量样式 */
  color: purple;
}

/* 你原来的子元素修改逻辑保留即可 */
.content:hover .childdiv1 .childdiv2 .childdiv3 {
   color: gray;
}

方案2：不修改DOM结构，通过父级hover触发（适合无法改DOM的场景） #

利用事件冒泡触发父容器的hover状态，间接控制label样式，需要配合pointer-events限制触发范围：

.outer {
  /* 父容器默认阻止所有交互事件，避免hover到label也触发 */
  pointer-events: none;
}
.content {
  /* 仅content保留交互能力，只有hover到content才会冒泡触发父级的hover */
  pointer-events: auto;
}

/* hover content时修改label样式 */
.outer:hover .label {
  color: red;
}

/* 你原来的子元素修改逻辑保留即可 */
.content:hover .childdiv1 .childdiv2 .childdiv3 {
   color: gray;
}

注意：本方案会让.label元素本身失去所有交互能力（比如点击、选中文本），如果label需要有交互效果不建议使用。

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