2022年有可能生兄弟姐妹吗？

Question

参考 2009 年的 Stackover 问题（是否有“前一个兄弟”选择器？），当时看来是不可能的。

问题

1. 这里有两个小例子，说明了CSS 触及的两个元素都位于触发元素下方的
2. 。在示例二中，一个元素位于触发元素上方，而另一个元素保持在触发元素下方。因此，同级选择器不会影响顶部的元素。

示例一

.toggle-switch {
  padding:50px;
}
#nocheck {
  margin-bottom: 2px;
} 

#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }

  <div class="">
    <div class="toggle-switch">
      
      <input type="checkbox" id="chkTest" name="chkTest">
      <label for="chkTest">
        <span class="toggle-track"></span>
      </label>
      <div class="" id="nocheck">ENABLE</div>
      <div class="col-3 col-md-3" id="check">DISABLE</div>
      
    </div>
  </div>

示例2

.toggle-switch {
  padding:50px;
}
#nocheck {
  margin-bottom: 2px;
} 

#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }

  <div class="">
    <div class="toggle-switch">
      <div class="" id="nocheck">ENABLE</div>
      <input type="checkbox" id="chkTest" name="chkTest">
      <label for="chkTest">
        <span class="toggle-track"></span>
      </label>
      
      <div class="col-3 col-md-3" id="check">DISABLE</div>
      
    </div>
  </div>

Answer 1

这与父选择器有同样的问题，CSS 只能看到 DOWN DOM 而不能备份。因为它只能看到未来的兄弟姐妹、孩子、孩子的孩子等。

我认为 Safari 在其开发版本之一中实现了 :has() 伪类，但它们是一个小型浏览器，而 Chrome 尚未实现任何内容。

您可能会被这里的几个问题所欺骗，这可能是一个有用的问题：
有 CSS 父选择器吗？

Kevin Powell 有一个很棒的视频
https://www.youtube.com/watch?v=2-xdcDsqsAs