选择器检查类是否存在于同一级别

Question

这是我的片段：

$( document ).ready(function() {
	//$(".tree-node").parents('.tree-child-folders').css("color", "red");
  //$(".tree-collapsed:has(.tree-child-folders)").css("color", "red");
  $(".tree-node > .tree-collapsed:has(.tree-child-folders)").css("color", "red");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST1</span>
  <span class="tree-collapsed">CHANGE COLOR</span>
  <span class="tree-test">TEST3</span>
</div>

<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST4</span>
  <span class="tree-other">TEST5</span>
  <span class="tree-test">TEST6</span>
</div>

<div class="tree-node">
  <span class="tree-line">TEST7</span>
  <span class="tree-collapsed">TEST8</span>
  <span class="tree-test">TEST9</span>
</div>

我想将红色放到<span>包含该类的.tree-collapsed上，并在同一级别上<span>包含该类的.tree-child-folders

我想知道是否可以仅使用CSS来做到这一点？

Answer 1

可以使用具有一般后继同级选择器的css ~（意味着元素在此之后，但不一定紧随其后）或下一个同级选择器来实现+

.tree-node > .tree-child-folders ~ .tree-collapsed {
color: red;
}

<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST1</span>
  <span class="tree-collapsed">CHANGE COLOR</span>
  <span class="tree-test">TEST3</span>
</div>

<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST4</span>
  <span class="tree-other">TEST5</span>
  <span class="tree-test">TEST6</span>
</div>

<div class="tree-node">
  <span class="tree-line">TEST7</span>
  <span class="tree-collapsed">TEST8</span>
  <span class="tree-test">TEST9</span>
</div>