Vue.js 动态样式改变失效：为什么使用后代选择器 `.content .active` 无法生效？-css教程-PHP中文网

Vue.js 动态样式改变失效：为什么使用后代选择器 `.content .active` 无法生效？

DDD

发布： 2024-11-02 13:59:18

原创

1026人浏览过

vue.js 动态样式改变失效：为什么使用后代选择器 `.content .active` 无法生效？

动态添加样式实现事件操作样式改变

使用 vue.js 实现了一个带有动态样式的标签，目的是当触发某个事件时，根据传入的布尔值来改变样式。

<div class="content" :class="{ active:iscollapse }">
  <myheader @changemenu="changemenu" :iscollapse="!iscollapse"></myheader>
</div>

登录后复制

data() {
  return {
    iscollapse: false
  }
},
methods: {
  changemenu() {
    this.iscollapse = !this.iscollapse
  }
}

登录后复制

.content {
  padding-left: 200px;
}
.active {
  padding-left: 65px;
}

登录后复制

然而，在触发事件后，控制台显示：

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

登录后复制

发现样式并没有如预期般改变。

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

解决方案

问题在于使用的 后代选择器 **.content .active**，它表示 **.active** 是 **.content** 的后代元素。为了让样式生效，需要使用 同级选择器 **.content.active**，表示 **.content** 和 **.active** 是同一个元素。

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

同级选择器（scss 写法）：

.content {
  padding-left: 200px;

  &.active {
    padding-left: 65px;
  }
}

登录后复制

转换后的 css：

.content { padding-left: 200px; }
.content.active { padding-left: 65px; }

登录后复制

后代选择器（scss 写法）：

.content {
  padding-left: 200px;

  .active {
    padding-left: 65px;
  }
}

登录后复制

转换后的 css：

.content { padding-left: 200px; }
.content .active { padding-left: 65px; }

登录后复制

注意：后代选择器不会对同一个元素生效，而是对后代元素生效。

以上就是Vue.js 动态样式改变失效：为什么使用后代选择器 `.content .active` 无法生效？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何在CSS中实现元素动画移动_position与keyframes结合 css flexbox对齐方式align-content如何使用如何在CSS中实现背景渐变动画_linear-gradient与keyframes CSS浮动和inline-block的区别_布局模式选择分析 CSS盒模型如何处理溢出内容_CSS overflow属性应用场景