Vue开发：style scoped样式的深度选择器

Vue开发过程中肯定会遇到页面子组件元素的选择问题,当父组件想修改子组件元素的样式,可以通过深度选择器进行元素样式的调整;

style scoped样式里深度选择器有三种写法：/deep/ 、>>> 、::v-deep

Vue页面代码:

第一种: /deep/

/deep/ 深度选择器的应用样式场景: scss和less,应用代码如下:

.inputStyle{
  /deep/  .el-input__inner {
    vertical-align: middle;
    color: red;
  }
}

第二种: >>>

>>> 深度选择器的应用场景只局限于普通样式css,代码如下:

.inputStyle >>> .el-input__inner {
    vertical-align: middle;
    color: red;
  }

第三种: ::v-deep

::v-deep深度选择器的应用场景: scss和less

.inputStyle {
  ::v-deep .el-input__inner {
    vertical-align: middle;
    color: red;
  }
} 

限时特惠：本站每日持续更新海量各大内部创业教程，永久会员享受全站资源免费下载.www.heook.com
站长微信：wc764800