如何基于深层嵌套子类为父类tree-item/li应用CSS或Sass样式？

CSS本身没有原生的父选择器，没法直接通过深层嵌套的子元素反向选中父元素，但可以通过以下几种方式实现需求：

1. 使用CSS :has() 伪类（现代浏览器适用） #

:has()是CSS新增的伪类，能够选中包含指定子元素的父元素，完美匹配你的需求。针对你的DOM结构，写法如下：

li.tree-item:has(.child-class) {
  /* 自定义样式示例 */
  background-color: #f5f5f5;
  border-left: 2px solid #42b983;
  padding-left: 10px;
}

注意：该特性目前支持Chrome、Edge、Safari等现代浏览器，Firefox需要手动开启layout.css.has-selector.enabled配置才能使用。

2. JavaScript辅助实现（全浏览器兼容） #

如果需要兼容旧版浏览器，可通过JS检测包含.child-class的tree-item，并为其添加额外类名，再通过CSS设置样式：

// 遍历所有.child-class元素，找到对应的父级tree-item
document.querySelectorAll('.child-class').forEach(childEl => {
  const parentTreeItem = childEl.closest('.tree-item');
  if (parentTreeItem) {
    parentTreeItem.classList.add('has-target-child');
  }
});

对应的CSS样式：

li.tree-item.has-target-child {
  /* 自定义样式示例 */
  background-color: #f5f5f5;
  border-left: 2px solid #42b983;
  padding-left: 10px;
}

3. Sass写法（代码更整洁，本质依赖上述方案） #

Sass作为CSS预处理器，可通过嵌套语法让代码结构更清晰，最终编译后的CSS和上述方案一致：

li.tree-item {
  /* 基础样式 */
  padding: 8px;
  margin: 4px 0;

  // 使用:has()的嵌套写法
  &:has(.child-class) {
    background-color: #f5f5f5;
    border-left: 2px solid #42b983;
    padding-left: 10px;
  }

  // 对应JS添加类名的写法
  &.has-target-child {
    background-color: #f5f5f5;
    border-left: 2px solid #42b983;
    padding-left: 10px;
  }
}

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