判断是否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}