如何用HTML + CSS中的另一个元素Selector更改元素的属性值？

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。此外，> is the child combinator，而不是兄弟组合。

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

Answer 2

我可以通过几种方式来解决这个问题，尽管它们并不完全真诚地使用CSS。

第一种方法依赖于创建一个＆＃34;假的＆＃34;克隆第一个按钮，并在第二个按钮为:active时显示，演示：little link。

第二种方法依赖于以下事实：当button之一为:active时，其背后的父元素也为:active。以下是此解决方案的演示：little link。