首页vue css深度选择器::v-deep

vue css深度选择器::v-deep

时间: 2023-11-11 15:14:54 浏览: 171

Vue中的深度作用选择器/deep/

在我们使用Vue搭建项目的时候，我们经常会用到一些UI框架，如Element，iView，但是有时候我们又想去修改UI框架的样式，当我们修改样式失败的时候，可以尝试一下/deep/，亲测有效。那失败的原因是什么呢？ UI框架的样式是定义在全局中，我们使用scoped时，局部样式会被全局样式所覆盖（vue默认全局样式覆盖局部样式）。有多种解决方法，推荐使用/deep/。当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。用法如下： /deep/

::v-deep 是 Vue 中的一种特殊的深度作用选择器，它只在 scoped 样式中起作用，并且可以将 CSS 规则应用于当前组件及其所有子组件中匹配选择器的元素。例如，.foo::v-deep .bar 会选择包含 class 为 "bar" 的元素的所有嵌套层次结构，但仅对 .foo 组件的样式生效。123 #### 引用[.reference_title] - *1* *3* [Vue 深度选择器:deep()与::v-deep详解](https://blog.csdn.net/CCC_chtt/article/details/130387675)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue 深度选择器＞＞＞或 /deep/ 或 ::v-deep](https://blog.csdn.net/yuan_jlj/article/details/118525646)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

阅读全文