动态变更标签样式的疑惑

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

问题代码如下：

<pre class="brush:php;toolbar:false;"><code>
<div class="content" :class="{ active:iscollapse }">
    <myheader @changemenu="changemenu" :iscollapse="!iscollapse"></myheader>
</code>

<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-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

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

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

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

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