javascript - 如何通过 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;
}

score 2 · Accepted Answer

反之亦然，因为兄弟组合器仅在一个方向上工作（从较早的兄弟到较晚的兄弟）。换句话说，使用 CSS，您只能更改单击的#t2时间#t1，而不能更改单击的#t1时间#t2。此外，>是子组合器，而不是兄弟组合器。

如果您需要相同的行为以两种方式工作，则必须使用 JavaScript mousedown 事件而不是:active选择器。

score 2 · Accepted Answer

我可以想到几种方法来仅使用 CSS 来实现这一点，尽管它们并不完全“真诚”。

第一种方法依赖于创建第一个按钮的“假”克隆，并在第二个按钮为:activedemo: little link时显示它。

第二种方法依赖于这样一个事实，即当您button的 s 之一是时:active，它后面的父元素:active也是如此。这是此解决方案的演示：little link。

2 回答 2