关于css:三大样式穿透

15次阅读

共计 431 个字符,预计需要花费 2 分钟才能阅读完成。

问题

用到很多 vue 罕用的组件库(element, vant, vuetify),尽管配好了款式然而还是须要更改其余的款式

解决

三大款式穿透 >>> , ::v-deep , /deep/

在 style 常常用 scoped 属性实现组件的私有化, 所以才须要款式穿透

须要留神:

  1. (>>> 只作用于 css
  2. ::v-deep 只作用于 sass
  3. /deep/ 只作用于 less

示例:
1

<style lang="scss" scoped>
.conBox ::v-deep .el-input__inner{padding:0 10px;}
</style>

2

<style lang="less" scoped>
.conBox /deep/ .el-input__inner{padding:0 10px;}
</style>

3

<style>
.num-input {
    width: 90px;
    margin-top: 15px;
    >>> .ivu-input {text-align: center!important;}
}
</style>

三大款式穿透

正文完
 0