uni-app 默认提供了许多的默认组件，同样也就不被了默认的样式，但是无法直接通过 style 中书写 CSS 样式来修改默认组件的样式，需要通过>>>或/deep/这两个穿透命令来实现，同时也设计到 scoped 关键字的设置，下面和子凡一起了解一下有关 uiniapp 的 CSS 样式。

App.vue（样式层级高）定义样式就可以覆盖子组件或者父组件，无论有没有设置 scoped 关键字。

子组件设置 scoped 会增加私有后缀，为了保证它的唯一性不会父组件导入的 css 覆盖掉，但 App.vue 导入的 css 会覆盖掉它（特别注意）。

父组件如何穿透子组件，覆盖默认组件的样式，这时候就需要使用到穿透：>>>和/deep/

不加 scoped 直接使用穿透容易出现污染全局，所以以严谨的态度，我们需要在 style 标签上加 scoped，同时使用 deep 穿透，简单举例如下：

1
2
3
4
5

<style scoped>
/deep/ .fanly {
	font-size: 14px;
}
</style>

代码中的/deep/同样可以使用“>>>”来替换，这是两种穿透的写法，当然 style 标签中不加 scoped 也是可以成功的。

w.haolusi.com

本文链接：https://w.haolusi.com/uniapp-css-deep-style-scoped.html