Vue3中如何将嵌套类的::v-deep写法转换为:deep()写法

Vue 3 中:deep()伪类的使用逻辑很明确：括号内传入需要样式穿透的最外层目标选择器即可，选择器内部的嵌套规则、&父选择器引用等写法和Vue2中预处理器的嵌套语法完全一致，无需额外修改。

对应你给出的多层嵌套代码，符合Vue3规范的写法如下：

:deep(.v-select) {
  .vs__dropdown-toggle {
    background: #fff;
    border-color: #ddd;
  }
  &.vs--open {
    .vs__dropdown-toggle {
      border-color: #ff6000;
    }
  }
}

关键注意点 #

• 单类名场景下，目标元素本身就是穿透的最外层节点，所以直接把类名传入:deep()即可，和你之前掌握的写法一致。
• 多层嵌套场景下，不需要把所有层级的选择器都塞进:deep()括号，只需要传入原::v-deep代码块下的第一层选择器，内部嵌套结构原封不动保留即可。
• 不要写成:deep(.v-select .vs__dropdown-toggle)再嵌套内部样式，这种写法会打乱样式优先级，容易出现样式不生效的问题。

内容的提问来源于stack exchange，提问作者Oğulcan Karayel