动态变更标签样式的疑惑

在使用 vue.js 时，遇到一个问题：为一个标签添加了动态样式，基于某个事件触发后传入一个布尔值，理论上样式会发生改变。然而，触发事件后，样式却没有发生变化。

问题代码如下：

<pre class="brush:php;toolbar:false;"><code>
<div class="content" :class="{ active:iscollapse }">
    <myheader :iscollapse="!iscollapse"></myheader><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code>
data () {
    return {
        iscollapse: false
    }
},
methods: {
    changemenu () {
        this.iscollapse = !this.iscollapse
    }
}
</code>

<pre class="brush:php;toolbar:false;"><code>
.content {
   padding-left: 200px;
   .active {
       padding-left: 65px;
   }
}
</code>

控制台输出了以下内容：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

<style>
#app .content {
    padding-left: 200px;
}</style>

问题源自后代选择器的写法，应该将样式写成同级，即：

<pre class="brush:php;toolbar:false;"><code>
.content {
    padding-left: 200px;
}
.active {
    padding-left: 65px;
}
</code>

在使用后代选择器时（".content .active"），样式只会在 ".active" 是 ".content" 后代元素时生效。而在同级选择器（".content.active"）中，".active" 与 ".content" 将出现在同一个元素上，才能让样式生效。