一、scoped
vue通过在<style> 里加入scoped 保证样式不会作用到子组件内，防止样式污染。
原理是给生成的dom加上一个“data-v序列号”的属性，再添加样式到对应的dom。
例子：
<template> <div class="page"> this is page
</div>
</template>
<style>
.page {
color: red;
}
</style>
这时候浏览器会生成带属性的div
<div class="page" data-v-88888888>
二、样式穿透 /deep/
我们经常会在组件中用到第三方组件，比如element-card，这时候想要改变第三方组件的样式，需要添加/deep/。
比如我在项目中插入了element-card组件:
<element-card class="box">
<div class="son">
this is son
</div>
</element-card>
<style scoped>
.box {
.son {
color: blue;
}
}
</style>
浏览器生成的dom是
<div class="box" data-v-88888888> <div class="son"> this is son </div> </div>
1，不添加/deep/，样式会作用在 .box[data-v-888888888] .son[data-v-88888888]上，由于没有这个节点所以失败。
2，添加/deep/，样式会作用在 .box[data-v-888888888] .son上，样式成功作用在子组件上。
标签：box,样式,deep,son,穿透,组件,data 来源： https://www.cnblogs.com/coldyouth/p/16544375.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。