使用以下命令隔离嵌套div：active伪选择器

Question

我正在使用的问题是嵌套div，其活动状态应相互隔离。例如，如果单击子项，则不应更改父项的活动状态。

在以下示例的情况下，只应选择橙色/红色方块，但正如您所见，触发它也会触发其父级。

我已经编写了一些JavaScript来通过隔离事件目标来解决这个问题，但如果它存在，我想找到一个CSS解决方案。

HTML：

  <div class="outer">
    <div class="inner"></div>
  </div>

CSS：

.outer {
  width: 300px;
  height: 300px;
  border: 3px solid black;
  position: relative;
}

.inner {
  position: absolute;
  right: 0;
  width: 150px;
  height: 150px;
  border: 3px solid orange;
}

.outer:active {
  background-color: purple;
}

.inner:active {
  background-color: red;
}