CSS中的深度选择器 deep 详解
什么是深度选择器？
在Vue等框架中，当我们使用组件作用域样式（Scoped CSS）时，有时需要修改子组件内部的样式。这时就需要用到深度选择器。
深度选择器的几种写法
1. >>> 语法
.parent >>> .child {
color: red;
}
2. /deep/ 语法
.parent /deep/ .child {
background: blue;
}
3. ::v-deep 语法（推荐）
.parent ::v-deep .child {
font-size: 16px;
}
使用场景
1. 修改第三方组件样式
<style scoped>
.my-component ::v-deep .el-input__inner {
height: 40px;
}
</style>
2. 修改多层级子组件样式
<style scoped>
.parent ::v-deep .child .grandchild {
border: 1px solid #ccc;
}
</style>
注意事项
- 深度选择器只在使用
scoped属性的样式块中才有效 - 在 Sass/SCSS 中使用
/deep/可能会出现编译问题，推荐使用::v-deep - Vue 3.x 中推荐使用
:deep()新语法：
.parent :deep(.child) {
color: red;
}
最佳实践
- 优先使用组件提供的 API 来修改样式
- 如果必须使用深度选择器，推荐使用
::v-deep或 Vue 3 的:deep() - 合理使用命名空间，避免样式污染
总结
深度选择器是在使用组件作用域样式时的重要工具，它让我们能够在不破坏组件封装的前提下修改子组件样式。但应该谨慎使用，优先考虑其他更好的样式解决方案。