判断是否checked然后给另外一个元素添加样式的选择器怎么写

Question

我用js实现的这个，想纯用css 这里的选择器不会选，该怎么写？主要就是通过是否checked控制left right，这个第二行代码选择器怎么写同时最好解决一下代码冗余 #switch{position: absolute;width: 50px;  height: 30px; border-radius: 15px;  background-color: white;top:5px;left: 5px}  input:checked#switch{position: absolute;width: 50px;  height: 30px; border-radius: 15px;  background-color: white;top:5px;left: 5px} <main>         <input type="checkbox" id="box" checked>         <span id="switch" class="left"></span>         <span class="bg">             <label for="box">ON</label>             <label for="box">OFF</label>         </span>     </main>

Answer 1

用兄弟选择器+

 input:checked + #switch{position: absolute;width: 50px;  height: 30px; border-radius: 15px;  background-color: #f00;top:5px;left: 5px}