Web前端开发资源网我们在使用 Vue 的开发新项目的时候，会发现 Vue 给 <style> 标签添加了一个 scoped 属性。
什么是 scoped
scoped 属性是 HTML5 中的新属性，是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
Vue 的转译
Vue 中 scoped 属性的效果主要是通过 PostCss 实现的。
转译前的代码：
<template>
<h1 class="title">前端资源网</h1>
</template>
<style scoped>
.title{
font-size: 16px;
color: #ccc;
}
</style>转以后的代码：
<h1 data-v-e43c18bc="" class="title">前端资源网</h1>
.title[data-v-e43c18bc] {
font-size: 16px;
color: #ccc;
}PostCSS 给一个组件中所有的 DOM 添加了一个独一无二的动态属性，然后给 CSS 选择器额外添加了一个对应的属性来选择该组件中的 DOM，这种做法使得样式只作用于含有该属性的 DOM ——组件内部 DOM 。
这样如果使用了 Ant Design for Vue 或者 Element UI 等第三方组件，就会出现 CSS 设置不起效的问题，无法通过 CSS 修改组件的样式。可以使用下面的方法来解决：
scoped 穿透：
1、使用 >>> 可以穿透 scoped 属性，修改其他第三方组件的样式。
<style scoped>
外层 >>> 第三方组件 {
样式
}
</style>2、使用曲线救国的一个方法，用两个 style 标签，一个带 scoped 属性，一个不带 scoped 属性，用来修改第三方组件的样式。
<style> /* 全局样式 */ </style> <style scoped> /* 局部样式 */ </style>
3、使用 sass 或 less 的样式穿透 /deep/
<style scoped>
/deep/ .title {
color: #888;
}
</style>4、还有一种就是不使用 scoped 属性，通过在最外层加 id 或者 class 的形式进行区分。
不论是使用何种方式，都需要与团队的同事沟通好，统一使用哪种方法，保证项目整合的时候不会出现冲突。
推荐阅读：
封装一个图片文件对象转Base64的方法