Vue.js动态样式绑定与CSS选择器：解决内边距失效问题
本文分析一个Vue.js动态样式绑定失效的案例，并提供解决方案。问题在于使用:class绑定布尔值控制元素内边距时，样式未能生效。
代码中，开发者试图通过:class="{ active: iscollapse }"动态添加active类到content div元素，期望iscollapse为true时，content元素内边距从200px变为65px。然而，初始CSS样式未能生效：
Vue代码片段：
立即学习“前端免费学习笔记（深入）”；
data () { return { iscollapse: false } }, methods: { changemenu () { this.iscollapse = !this.iscollapse } }
错误的CSS代码：
.content {
padding-left: 200px;
.active {
padding-left: 65px;
}
}
问题根源在于CSS选择器的错误使用。.content .active是嵌套选择器，要求.active必须是.content的子元素才能生效。而实际情况是active类直接添加到.content元素上。
解决方案：使用组合选择器
正确的做法是使用组合选择器.content.active，它只作用于同时拥有.content和.active类的元素。
正确的CSS代码：
.content {
padding-left: 200px;
}
.content.active {
padding-left: 65px;
}
更简洁的SCSS写法：
.content {
padding-left: 200px;
&.active {
padding-left: 65px;
}
}
SCSS代码编译后效果与上述CSS代码相同。 需要注意的是，.content .active是后代选择器，.content.active是组合选择器，选择哪种取决于实际需求。 通过修改CSS选择器，即可解决Vue.js动态样式绑定失效的问题。
