大家好，我是一個初學者，想在css方面做得更好。在像hover，checked等事件中，如何從另一個div中定位一個元素？

請看下面我的意思的例子:

<div>
<input type="checkbox">
</div>


<div>

<button>example</button>

</div>

input:checked /how do I target button/{
background-color:#f0f0f0;
}

我學會了我可以用~例子瞄準兄弟姐妹 /如果他們是兄弟姐妹/

input:checked ~ button {
background-color:#fefefe;
}

如何對來自不同父元素的元素做相似的操作？

據我所知，這只能用一點JavaScript來實現。這里有一種方法:

document.querySelectorAll("[type=checkbox]").forEach(cb=>cb.onchange=ev=>
ev.target.closest("div").nextElementSibling.querySelector("button").style.backgroundColor=ev.target.checked?"red":"")

div {background-color:#ddd; margin:6px}

<div>first div <input type="checkbox"></div>
<div>second div text <button>example</button></div>
<div>third div <input type="checkbox"></div>
<div>fourth div text <button>example</button></div>