是否有可能在 2022 年向上兄弟姐妹？

Question

参考2009年的这个Stackover问题(Is there a "previous sibling" selector?)，当时好像不行

这里有两个小例子可以说明问题

CSS 触及的两个元素都在触发元素下。
在示例中有两个，一个元素在触发元素上方，另一个保持在触发元素下方。因此，兄弟选择器不会影响顶部的元素。

例子一

.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

这与 parent 选择器的问题相同，CSS 只能看到 DOM 无法备份。因为它只能看到未来的兄弟姐妹，children、children of children 等

我认为 Safari 在他们的开发版本之一中实现了 :has() 伪 class，但它们是一个小型浏览器，Chrome 尚未实现任何东西。

你可能会因为这里的几个问题而被骗，这可能是一个有用的问题： Is there a CSS parent selector?

凯文鲍威尔的视频很棒 https://www.youtube.com/watch?v=2-xdcDsqsAs

是否有可能在 2022 年向上兄弟姐妹？

Is it possible to sibling upwards in 2022?

css

siblings