vue里边如何让css样式只在当前组件中生效方法很简单，在组件中的style前面加上scoped就可以了，示例：什么是s

方法很简单，在组件中的style前面加上scoped就可以了，示例：

scoped 属性是 HTML5 中的新属性，是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码：

转译后：

即：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

1、使用 >>> 可以穿透 scoped 属性，修改其他第三方组件的样式。

2、使用曲线救国的一个方法，用两个 style 标签，一个带 scoped 属性，一个不带 scoped 属性，用来修改第三方组件的样式。

3、使用 sass 或 less 的样式穿透 /deep/

4、还有一种就是不使用 scoped 属性，通过在最外层加 id 或者 class 的形式进行区分。

不论是使用何种方式，都需要与团队的同事沟通好，统一使用哪种方法，保证项目整合的时候不会出现冲突。