将样式应用于未选中的元素

Question

目前，我设置了两行项目，其中一项是人员，另一项是：

person1 thing1 person2 thing2 person3 thing3

当用户点击某个人时，该人及其关联的内容将保持不变，但其他每个项目都会消失（例如，不透明度为.4）。当没有选择任何内容时，所有内容都会突出显示 - 也就是说，所有内容都具有1的不透明度。因此，当您点击某个项目时，它会突出显示它的朋友。

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

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

1. 仅更改有效项目

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

Answer 1

在写这个问题时，我想出了一个解决方案，虽然它并不像我想的那样干净。

选择项目后，将.hasSelected类添加到包含所有列表项的容器中。然后，css将如下：

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