Vue 项目中的深度作用选择器

一、深度作用选择器

主要有以下三种深度作用选择器

1. >>>
2. /deep/
3. ::v-deep

二、项目中如何使用

在 CSS、Less 中使用：>>>

如下对 input 设置样式

<style>
.demo >>> input {
    font-size: 14px;
}
</style>

在 Sass、Scss 中使用：/deep/

如下对 input 设置样式

<style leng="scss" scoped>
.demo /deep/ {
    font-size: 14px;
    input {
        font-size: 14px;
    }
}
</style>

如果报错，使用：::v-deep

如下对 input 设置样式

<style leng="scss" scoped>
.demo ::v-deep {
    font-size: 14px;
    input {
        font-size: 14px;
    }
}
</style>