vue.js 3的页面中css里的:deep()是干什么的

zlpzlpzyd2025-12-10 11:06

一句话

在vue.js 3中只能结合<style scoped>使用，是专门为 scoped css 设计的，在非 scoped 样式中没有意义。

近期在写页面的过程中，经常看到:deep()，不知是干什么的，问了一下AI，如下

:deep()是 CSS 中的深度选择器，主要用于在支持样式穿透的框架中（如 Vue 3 的 <style scoped>中），选择子组件内部的元素。

:deep()是 Vue 特有的 CSS 功能，在原生 CSS 中无效。

:deep()主要用于在 Vue 的作用域样式中，突破样式隔离，有选择地修改子组件内部的样式，是组件库定制和样式覆盖的常用工具。

:deep()最终会被 Vue 的编译工具处理，不会被 PostCSS 直接处理。

编译过程

复制代码

.parent :deep(.child .item) {
  color: red;
  padding: 10px;
}

Vue 的编译工具会将 :deep()转换为特殊属性选择器

复制代码

/* 编译结果示例 */
.parent[data-v-xxxxxxx] .child .item {
  color: red;
  padding: 10px;
}

构建流程

Vue SFC → Vue 编译(:deep处理) → 生成CSS → PostCSS处理 → 最终CSS

:deep()被 Vue 的编译器（不是 PostCSS）编译为带有 [data-v-*]的属性选择器。这种转换发生在 PostCSS 处理之前，让样式能穿透组件作用域，同时保持样式隔离的特性。