初识 /deep/ 和 ＞＞＞

初识 /deep/ 和 >>>

前提场景：在开发vue或者uni-app的时候，我们会用到一些第三方的ui组件库，例如element ui，我们的需求可能在这些ui组件库里找不到完全适合的样式，需要我们在此基础上修改样式以来实现自己的需求。此时，我们就可能会遇见这样一个问题，找到了组件库元素对应的标签名，修改此标签样式，但是并不生效，这可能是实际上就没有找到这个元素，这时我们就需要一个选择器能深度的帮助我们找到这个元素，比如>>>

解决办法：使用深度作用器

<style scoped>
	 // scoped:  在style中使用了scoped，则style标签里的css仅作用于当前页面
	.classA >>> .classB { /* ... */ }
</style>

但是当我们使用 Sass、Less、Scss 之类的预处理器的时候无法正确解析>>>。这种情况下就可以使用/deep/操作符取来代替。

<style scoped lang="scss">
	.scroll-tab {
		display: flex;
		flex-direction: row;
		height: 80rpx; 
		/deep/ .uni-scroll-view-content {   // 这里以uni-app的开发为例
			display: flex;
		}
	}
</style>

在查阅资料过程中，遇见一个其它的使用情况，是v-html设置样式无效的问题：
场景：例如使用v-html加载一些后台返回的一段富文本HTML代码，富文本里包含图片，在手机上图片宽度可能会溢出或者需要设置一些样式。
解决办法：使用深度作用器

<div v-html="htmlContent" class="rich"></div>    
<style scope>
 	.rich>>> img{ display:block; max-width: 100%}
</style>

或者

<style scope lang="scss">
 	.rich /deep/ img { display:block; max-width: 100%}
</style>

文章参考链接：https://blog.csdn.net/caseywei/article/details/99960392