vue2语法提供3种 >>>   /deep/  ::v-deep
父组件选择器 >>> 子组件选择器 { 子组件样式 }
/deep/ 子组件选择器 { 子组件样式 }
::v-deep 子组件选择器 { 子组件样式 }

vue3语法提供2种  :deep()   ::v-deep()
:deep(子组件选择器){ 子组件样式 }
::v-deep(子组件选择器){ 子组件样式 }

经测试, 这五种穿透语法在vue2和vue3中都兼容

<style scoped>
/* >>> 只对css原生样式穿透 */
#app >>> h2 {
color: red;
}
/* /deep/ css/less/sass通用样式穿透 */
/deep/ h2{
background-color: #42b983;
}
/* ::v-deep css/less/sass通用样式穿透 */
::v-deep h2{
border-radius: 10px;
}
/* :deep() vue3新增  css/less/sass通用样式穿透  */
:deep(h2){
font-size: 30px;
}
/* ::v-deep() vue3新增  css/less/sass通用样式穿透 */
::v-deep(h2){
line-height: 50px;
}
</style>

注意: 有时,第三方组件库中使用穿透改子组件样式也不生效,
如,修改vant3中的NavBar标题样式
.van-nav-bar__title{ color: red; } 不生效
可能是此标签嵌套的层级太深, 样式查找不准确, 在前边加上父标签限制即可
#app .van-nav-bar .van-nav-bar__title{ color: red; } 生效