Vue项目中子组件样式设置了scoped 属性后一些样式失效问题

BlackCarbo

于 2019-06-24 15:57:13 发布

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web 前端

本文链接：https://blog.youkuaiyun.com/weixin_42029090/article/details/93491495

Web 同时被 2 个专栏收录

29 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

在Vue项目中，使用scoped属性的style标签确保CSS仅作用于当前组件，防止父组件样式污染。然而，这可能导致子组件的某些样式失效，尤其是针对根元素。为了解决这个问题，可以利用深度作用选择器，如>>>、/deep/或::v-deep，来穿透组件的样式隔离，确保所需样式生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scoped 属性

当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

<template>
  <div class="example">
    hi
    <p>scoped</p>
  </div>
</template>

<style scoped>
.example {
  color: red;
}
.example p {
  color: yellow;
}
</style>

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。

一些样式失效解决方法

这时候 p 标签内的样式可能会失效。解决办法是使用深度作用选择器，即 >>> 操作符，或使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。上面代码可以改成：

<style scoped>
.example >>> p {
  color: yellow;
}
//或者
.example /deep/ p {
  color: yellow;
}
</style>

链接：https://vue-loader.vuejs.org/zh/guide/scoped-css.html