CSS中是否可以通过单击另一个元素来更改元素的样式？

Question

在CSS中，我们可以通过单击父元素（例如带有'a'标签）来更改子元素的样式

<a class='button' href='#'>Example <i class='icon'></i></a>

a.button:focus i.icon { display: none; } 

或

a.button:active i.icon { display: none; }

因此，当我单击a.button时，i.icon就会消失

但是如果我们有多个元素

<a class='button1' href='#'>Example <i class='icon1'></i></a>
<a class='button2' href='#'>Example <i class='icon2'></i></a>

如何通过单击a.button1来影响a.button2的样式？

是否可以在不使用jQuery方法的情况下使用CSS？

Answer 1

您是否考虑过“复选框黑客”？文章Stuff you can do with the Checkbox Hack包含使用复选框，单选按钮，选项卡式区域，下拉菜单，推动开关和折叠面板的这种技术的示例。本文底部的链接包含更多示例。

文章CSS Click Events可能是您想要的。

文章101 Ways to (ab)use a Checkbox值得回顾。

Answer 2

不幸的是，CSS中没有普遍支持的方法来在不是clicked / hovered元素的子节点的元素中产生click或hover行为。正如另一个答案所指出的那样，有组合器，但是它们不能像您希望的“活动”选择器那样工作。

Here's an example.

为此，我建议使用旧的JavaScript。

document.querySelector('.button1').addEventListener('click', function() {
    document.querySelector('.button2').style.color = red;
});

Answer 3

我认为您正在寻找同级组合器。 参见：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

我认为并非所有浏览器都普遍支持此功能，因此在生产环境中使用此类功能时请务必小心。

其他类型的组合器：https://www.w3schools.com/css/css_combinators.asp

Answer 4

在css中，您可以使用css相邻的同级选择器（+）选择下一个同级（在这种情况下，单击a.button1以实现a.button2）

a.button1:focus + a.button2 > i.icon2 {display: none}

不幸的是，css无法选择前一个兄弟姐妹，因此您可以使用javascript：

document.querySelector('.button2').addEventListener('focusin', function() {
    this.previousSibling.firstChild.style.display = 'none';
});