如何用纯CSS为同级Div模拟的树结构标记指定子元素？

解决方案思路 #

利用现代CSS的:has()伪类、CSS变量和兄弟选择器组合，无需嵌套结构或JS，即可实现扁平节点的层级高亮控制：

1. 用CSS变量--level将每个节点的层级数值化，方便层级比较
2. 悬停时通过:has()给父容器记录当前层级
3. 选中悬停节点后的所有节点，排除掉同层级/更高层级节点之后的元素，仅保留层级更低的子节点

完整代码示例 #

CSS 样式

/* 基础布局与层级定义 */
.a {
  margin: 0.2em 0;
}
[class^="l"] {
  padding: 0.3em;
  border: 1px solid #eee;
  display: inline-block;
  transition: all 0.2s ease;
}
.l1 { --level: 1; padding-left: 0; }
.l2 { --level: 2; padding-left: 1em; }
.l3 { --level: 3; padding-left: 2em; }
.l4 { --level: 4; padding-left: 3em; }
/* 可根据需求扩展更多层级，只需按规律增加--level和padding-left */

/* 核心高亮逻辑 */
/* 记录悬停节点的层级 */
.a:has([class^="l"]:hover) {
  --hover-level: var(--level);
}

/* 选中符合条件的子节点并高亮 */
.a:has([class^="l"]:hover) 
~ .a:not(:has([class^="l"]:where(--level <= var(--hover-level))) ~ .a)
:has([class^="l"]:where(--level > var(--hover-level))) {
  border-color: #2196F3;
  background-color: #e3f2fd;
}

HTML 结构示例

<div class="a"><div class="l1">A1</div></div>
<div class="a"><div class="l2">A2</div></div>
<div class="a"><div class="l2">A2</div></div>
<div class="a"><div class="l3">A3</div></div>
<div class="a"><div class="l1">B1</div></div>
<div class="a"><div class="l2">B2</div></div>
<div class="a"><div class="l3">B3</div></div>
<div class="a"><div class="l1">C1</div></div>

效果说明 #

• 悬停A1时，所有层级高于1的A系列节点（A2、A2、A3）会被高亮，B/C系列不受影响
• 悬停第二个A2时，仅层级高于2的A3被高亮
• 悬停B1时，B2、B3被高亮；悬停B2时，仅B3被高亮
• 完全适配虚拟列表场景：无需提前知晓层级数量，所有选择器动态匹配同级元素，无嵌套依赖

内容的提问来源于stack exchange，提问作者Mr. Curious