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

How to change the attribute value of an element with by another element Selector in HTML + CSS?

本文关键字：元素 属性 Selector 另一个 何通过 HTML+CSS      更新时间：2023-09-26

我有两个元素Buttons，当我单击另一个时，我想更改其中一个元素的颜色，反之亦然。我试过了，但没用。有人能帮我吗？HTML:

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

CSS：

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

我可以想出几种只使用CSS实现这一点的方法，尽管它们并不完全"真诚"。

第一种方法依赖于创建第一个按钮的"伪"克隆，并在第二个按钮为:active时显示它，demo:little链接。

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

没有相反的情况，因为兄弟组合子只在一个方向上工作（从早期的兄弟到后期的兄弟）。换句话说，使用CSS，单击#t1时只能更改#t2，而单击#t2时不能更改#t1。此外，>是子组合子，而不是兄弟组合子。

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

相关文章：