css穿透 /deep/和scoped

CSS穿透是指在使用组件化开发的时候，子组件需要修改父组件的样式时，需要使用一些特殊的选择器来穿透到父组件的样式规则中。在Vue和React中，可以使用/deep/或>>>来实现CSS穿透。

/deep/和>>>都是特殊的选择器，可以穿透子组件的作用域，从而修改父组件的样式。它们的使用方式类似，只不过/deep/是深度选择器，而>>>是浅度选择器。

scoped是Vue中的一个特殊属性，用于限定一个组件的样式作用域，防止样式污染。在Vue中，组件的样式默认是被封闭在组件作用域内的，只有在使用/deep/或>>>选择器的情况下才能穿透到父组件的样式中。

需要注意的是，/deep/和>>>选择器在某些浏览器中可能会被禁用或不被支持，这时可以考虑使用其他方式来实现CSS穿透，比如使用CSS变量或者使用全局样式。

相关问题

css /deep/

Css /deep/ 是一种用于覆盖子组件内样式的伪类选择器，它可以穿透组件的边界，作用于子组件内的样式。这个伪类选择器通常在父组件的样式中使用，用于选择子组件的元素并覆盖其样式。

例如，在父组件的样式中使用 /deep/ 选择器可以选择子组件中的元素并修改其样式。比如，父组件中的样式可以这样写：

<style scoped>
.wrap /deep/ .child {
  color: red;
}
</style>

这样就能够选择到子组件中的 .child 类，并将其文字颜色设置为红色。 通过使用 /deep/ 选择器，父组件可以穿透子组件的样式边界，实现对子组件内部元素样式的修改。

需要注意的是，/deep/ 伪类选择器在较新版本的 CSS 规范中已经被弃用，推荐使用其他方式来处理组件样式的嵌套问题。例如，使用 CSS Modules 或 CSS-in-JS 等技术，可以更好地管理组件样式的封装性和可维护性。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [css: deep深度作用选择器](https://blog.csdn.net/weixin_39357177/article/details/114371187)[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_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

/deep/和::v-deep的区别

/deep/ 和 ::v-deep 的区别是：
1. /deep/ 是旧版本的 CSS 选择器，用于穿透组件边界，直接作用于子组件的样式。它可以让你在样式中修改子组件的样式，而不受组件边界的限制。
2. ::v-deep 是 Vue.js 中的一个特殊选择器，用于在单文件组件中穿透scoped样式，直接作用于子组件的样式。它可以让你在样式中修改子组件的样式，而不受scoped样式的限制。

需要注意的是，/deep/ 已经被弃用，不再推荐使用。而 ::v-deep 仅在 Vue.js 中可用，在其他 CSS 环境下是无效的。