如何用LESS选择无list__item--draggable祖先的目标元素？

需求说明 #

现有如下HTML结构：

<ul class="list list--sm">
    <li class="list__item list__item--draggable">
        List item 1
          <ul>
              <li class="list__item list__item--draggable">
                  List item 1.1
                    <ul>
                      <li class="list__item list__item--draggable">
                           List item 1.1.1
                      </li>
                    </ul>
              </li>
          </ul>
    </li>
</ul>

需要选中带有list__item--draggable类，且所有父级/祖先元素都不包含该类的元素（即文本为“List item 1”的元素），要求用LESS实现，且不能使用>子选择器（因为嵌套结构中可能包含更多div或其他元素）。

实现方案 #

可以实现，核心思路是先给所有目标类元素设置样式，再覆盖嵌套在同类祖先中的元素样式，最终只有最外层符合要求的元素会保留目标样式。

对应的LESS代码如下：

// 给所有带list__item--draggable类的元素设置目标样式
.list__item--draggable {
  color: red; // 示例样式，可按需修改
}

// 给被同类祖先包含的元素重置样式，覆盖上一步的设置
.list__item--draggable .list__item--draggable {
  color: initial; // 还原默认样式，或设置为非目标样式
}

原理说明 #

这种方法利用CSS的优先级规则：后代选择器和基础类选择器权重一致，但后定义的样式会覆盖先定义的。因此嵌套在同类元素里的list__item--draggable元素会被重置样式，而最外层没有同类祖先的元素不受第二步影响，保留目标样式。完全不需要依赖>子选择器，适配任意深度的嵌套结构，不管中间有多少其他元素。

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