vue3中的深度选择器
vue2中 /deep/ 的样式代码改为 Vue 3 中推荐的 :deep() 写法
Vue 3 中 :deep() 的用法。:deep() 是一个伪类，用于在<style scoped> 中穿透子组件的作用域。
它的语法是将选择器包裹在 :deep() 中，例如 :deep(.class)
.tip-warpper /deep/ .form-tips-container .tips label {
-webkit-box-flex: unset;
-webkit-flex: none;
-ms-flex: none;
flex: none;
// 限制最大最小宽度超出自动换行
word-break: break-all;
word-wrap: break-word;
max-width: 888px;
color: rgba(0, 0, 0, 0.3) !important;
}
改为：
.tip-warpper :deep(.form-tips-container .tips label) {
-webkit-box-flex: unset;
-webkit-flex: none;
-ms-flex: none;
flex: none;
/* 限制最大最小宽度超出自动换行 */
word-break: break-all;
word-wrap: break-word;
max-width: 888px;
color: rgba(0, 0, 0, 0.3) !important;
}
还可以使用::v-deep，
::v-deep 是一个用于深度选择器的伪元素，用于在<style scoped> 中穿透组件的作用域，修改子组件的样式