javascript - 将样式应用于未选择的元素

Question

目前，我设置了两行元素，一行人和一件事:

人 1 事 1人2 事2人 3 事 3

当用户点击某个人时，该人及其关联的事物将保持原样，但其他所有元素都会淡出(例如，不透明度为 .4)。当未选择任何内容时，所有内容都会突出显示 - 也就是说，所有内容的不透明度均为 1)。因此，当您单击某个元素时，它和它的 friend 将突出显示。

我理解事件和应用类背后的 javscript，所以:使用 css，是否有一种有效的方法来做到这一点？

我知道有一个低效的解决方案 - 为每个未选择的元素设置样式 - 但是，有什么东西可以让我:

1. 仅更改事件项

2. 将样式信息包含在类中(即不是内联样式)

Answer 1

在写问题时我想出了一个解决方案，尽管它不像我想要的那么干净。

当一个元素被选中时，添加一个.hasSelected类到包含所有列表元素的容器中。然后，CSS 将如下所示:

.hasSelected {
  .item {
    opacity: 0.4;
  }
  .item.selected {
    opacity: 1;
  }
}