vue3使用深度选择器修改样式

---

前言

解决警告：[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

---

vue3已弃用以往的深度选择器

• 警告： the >>> and /deep/ combinators have been deprecated. Use :deep() instead. 翻译过来就是 “>>>和/deep/已经被弃用。使用方法:deep()。”
• 虽然以往的>>>和/deep/依然可以使用，但是会出现警告语句提示
• 要是不想看到警告的话可以使用 “:deep()” 即可

例子：

/deep/ .el-button.is-round {
    padding: 4px 20px;
    background-color: #109cf1;
}

/*改为如下书写方式即可 */
:deep(.el-button.is-round) {
    padding: 4px 20px;
    background-color: #109cf1;
}

当有并集选择器，直接把类名放入 :deep() 括号中是不太对的：

/*如下修改只能改到第一个类名，修改不到第二个类名 */
:deep(.el-input__inner，
.el-button.is-round) {
    width: 440px;
    height: 60px;
    line-height: 20px;
    border-radius: 30px;
    border: 1px solid rgba(211, 211, 211, 100);
    font-size: 16px;
}

/*应改为 */
:deep(.el-input__inner),
:deep(.el-button.is-round) {
    width: 440px;
    height: 60px;
    line-height: 20px;
    border-radius: 30px;
    border: 1px solid rgba(211, 211, 211, 100);
    font-size: 16px;
}

提示：文章到此结束，文章仅为个人学习记录，若有不足还请大家指出。