v-deep选择器

该文章由 leevare 发布于 ,归类于 HTML/CSS

在 vue 中,为了防止 css 污染,会在style标签上添加一个scoped属性。所以,如果在父组件将 style 设置为scoped的时,如果想改变该父组件中引入的子组件样式,则不会生效。如下例:

parent

<template>
  <div class="app">
    <h1>parent</h1>
    <child></child>
  </div>
</template>

<style scoped>
.app h2 {
  color: red;
}
</style>

child

<template>
  <h2>I am child component</h2>
</template>

<style scoped></style>

此时设置的color: red将不会生效。此时,如果使用 v-deep 选择器,可以解决这个问题。

<style scoped>
.app >>> h2 {
  color: red;
}
</style>

如果使用 scss 或者 less 的写法,需要像下面这样写

<style lang="less" scoped>
/deep/ .app {
  h2 {
    color: red;
  }
}
</style>

与上述达到相同的效果,利用深度作用选择器,轻松解决此类问题。

相关文章:

说点什么

avatar
  Subscribe  
提醒