css 如何根据子元素给他的父元素设置样式

<div class="parent">

   <div :class="{ flag ? 'active' : 'unactive' }">子元素啊根据一个变量来加样式</div>

</div>

这个时候如何根据子元素来给这个parent加样式呢？

其中能马上想到的就是：这个class的判断可以加在parent后面，但是如果不改变外层内容只是修改css呢。

这个时候我们可以用到:has

.parent:has(.active){

    color:red;

} 

.parent:has(.unactive){

    color:yellow;

}