如何用HTML + CSS中的另一個元素選擇器更改元素的屬性值？

Question

我有2個元素按鈕，當我單擊另一個按鈕時，我想更改一個按鈕的顏色，反之亦然。 我嘗試過，但不起作用。 誰能幫我？ HTML：

<button id="t1">Test 1</button>
<button id="t2">Test 2</button>

CSS：

#t1:active + #t2
{
    color: red;
}
#t2:active + #t1
{
    color: red;
}

Answer 1

反之亦然，因為同級組合器僅在一個方向上工作（從較早的同級到較晚的同級）。 換句話說，使用CSS，你只能改變#t2時#t1被點擊，而不是#t1時#t2被點擊。 此外， >是子組合器 ，而不是同級組合器。

如果需要相同的行為才能同時使用兩種方法，則必須使用JavaScript mousedown事件而不是:active選擇器。

Answer 2

盡管沒有完全“真誠”，但我可以想到幾種方法來僅使用CSS來實現此目的。

第一種方法依賴於創建第一個按鈕的“偽”克隆，並在第二個按鈕為:active ，demo： little link時顯示它。

第二種方法依賴於以下事實：當button s之一為:active ，其后的父元素也為:active 。 這是此解決方案的演示： little link 。