css :active阻止冒泡

我们在写css active样式的时候，我们想要达到的是这个效果，但是在实际写的时候，却发现:acticve它是会冒泡的，比如这样

<div class="father">
  <div class="child"></div>
</div>

<style>
.father{
  background-color:black;
  width:400px;
  height:400px;
  padding:100px 0;
}
.child{
  width: 100px;
  height:100px;
  margin:0 auto;
  background-color: #fff;
}
.father:active{
  background-color:green;
}
.child:active{
  background-color: red;
}

</style>

我们想要点击child的时候，不想让father再变色，此时我们需要一个css选择器来判断，如果有子元素被active，那么父元素就不变色

.father:active:not(.father:has(.child:active)){
  background-color:green;
}

就长这个样子

但是，如果说我们有多个子元素，都想要有这样的配置呢？是不是我们需要写一大堆的这种:not(:has)，写法很繁琐，那么是否有一种东西能够简洁配置呢？

我们很容易就会想到一个css选择器 *

.father:active:not(.father:has(*:active)){
  background-color:green;
}

但是这会使得摁住其他普通的子元素也不让父元素变色，我只想要，在我摁住那些我想要让特定的子元素上面，父元素不变色，但是我们又不想写那么多css代码，我只想用一个css选择器搞定

还记得一个叫做自定义属性的东西吗，我们只需要在html里面配置一个自定义的attribute，就可以达成这样的目的

.father:active:not(.father:has(*[stopCssBubble=true]:active)){
  background-color:green;
}

这样就方便许多了，唉要是有js的那种stopBubble就好了