Vue3 关于scss预编译中:deep 其中的deep如何理解

特性（有括号）（无括号）语法正确性✅ Vue 3.3+ 官方推荐⚠️ 已被废弃（兼容旧项目）编译结果相同（相同（但会触发警告）未来兼容性安全可能在未来版本失效代码规范符合 CSS 伪类标准（如:not()不符合标准伪类写法。

/deep/ ::v-deep :deep vue深度选择器，elementui调整样式不起效果当我们遇到需要在一个组件中想要影响到子组件，就可以使用深度选择器，而::v-deep 在vue3中已经启用了 /deep/ 和>>>有存预处理器不支持和浏览器兼容为题，综上所述，使用:deep()是最佳的解决方案。

语法意思:deep()让你在 scoped 样式中穿透作用域，选到子组件或内部元素。

由上可知，:deep() 要生效必须在当前组件某节点下挂载情况下才生效。初步断定，:deep() 的作用是当前组件向下渗透，只要你在这个组件节点下面衍生，那么就会生效;当你垮出了对应的节点，自然就会失效(样式写在父组件:deep，子组件写弹框，只要挂载在父组件衍生到子组件的所有节点皆可生效)。其实可以通过来辨别，相信大家都知道这个是什么意思：这是在标记 vue 文件中 css 时使用scoped标记产生的，因为要保证各文件中的 css 不相互影响，给每个component。

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。在 vue3 中用:deep()，需要 vue3 的template里加上父标签，并在 less 中使用父标签包裹 要穿透的样式内容。scoped 会在元素上添加唯一的属性（data-v-xxxx），css编译后也会加上属性选择器，从而达到限制作用域的目的。1、scoped原理。

在 Vue 3 中，`:deep()` 是一个用于 **Scoped CSS** 的伪类选择器，它的作用是穿透组件样式作用域，允许父组件修改子组件内部的样式

vue3 进行组件的样式击穿。

Vue:单文件组件 CSS 功能（ scoped、deep）

原理：在css中使用过选择器的选择过元素 (组件下)元素生成添加一个属性 => data-v-hash值 webpack或vite打包时自动生成添加。2. 当我们在style标签中需要改变vant组件的样式时，需要使用到深度选择器。技术栈：Vue3 TypeScript Vite Vant。背景：scope样式私有化，避免样式冲突。1.在template中的布局。

在 Vue 3 中，:deep用于在标签内的样式中，选择子组件内部的元素。这是为了在使用scoped样式时，依然能够影响到子组件或其内部的深层次元素。它的作用类似于 Vue 2 中的>>>或/deep/，但是 Vue 3 提供了更好的语法，推荐使用:deep()。

2、在父组件中修改对应的class。1、在子组件中设计class。

vue3 中的 css deep 函数是用来实现深度作用选择器的。它可以用来匹配当前元素的所有后代元素，并为这些元素应用样式。比如，如果有如下的 HTML 结构： <divclass="container"> <p>Lorem ipsum</p> <div> <p>Dolor sit amet</p> &l...

在Vue中，除了常见的CSS选择器外，还有一些独有的选择器，这些选择器可以更方便地操作Vue组件。

scoped 属性是HTML5中的新属性，标签在加上了scoped属性时，样式实现组件私有化，父组件的样式不会渗透到子组件，不会造成局部或全局的污染。这个时候如果你想让样式中的一个选择器作用得更深（渗透到子组件），可以使用深度选择器::v-deep。

首先让我们了解下什么叫CSS的作用域？ 有作用域的 CSS 当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换： <style scoped> .example { color: red; } </style> <template> <div class="example">.