doubleyong
管理员
管理员
  • 最后登录2020-10-29
  • 发帖数914
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:1307回复:2

[vue]vue scoped css 深度选择器 父组件的样式将渗透到子组件中

楼主#
更多 发布于:2019-06-10 21:08
style 标记具有该scoped属性时,其CSS将仅应用于当前组件的元素。代码如下:

<style scoped>
.example {
  color: red;
}
</style>
<template>
  <div class="example">hi</div>
</template>
编译之后
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>



可以看出来,组件之间的样式是相互独立的,即父组件不能使用子组件的样式,子组件也不能使用父组件的样式。如果,不加scoped, 所有的组件都可以使用,称之为全局样式,加了scoped只有本组件可以使用,称为本地样式.

混合样式


您可以在同一组件中包含范围和非范围样式:
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>




子组件根元素


使用时scoped,父组件的样式不会泄漏到子组件中。但是,子组件的根节点将受父级作用域CSS和子级作用域CSS的影响。这是设计的,以便父级可以设置子根元素的样式以进行布局。

深度选择器


如果您希望scoped样式中的选择器“深入”,即影响子组件,则可以使用>>>组合子:
<style scoped>
.a >>> .b { /* ... */ }
</style>

以上将编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
某些预处理器(如Sass)可能无法>>>正确解析。在这些情况下,您可以使用组合/deep/或::v-deep组合 - 两者都是别名,>>>并且工作完全相同。

<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>
官方文档:https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

参考 :https://juejin.im/post/5cf8c541f265da1b8b2b4ee3
知识需要管理,知识需要分享
blanc
新手
新手
  • 最后登录2020-10-14
  • 发帖数1
沙发#
发布于:2020-09-25 16:45
666,vue+element 有时就需要这个修改样式昨天刚好就用到了这个‘>>>’
doubleyong
管理员
管理员
  • 最后登录2020-10-29
  • 发帖数914
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
板凳#
发布于:2020-09-25 15:21
666
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号