vue 之 CSS进行样式穿透的方法（/deep/、::v-deep、＞＞＞ 、:deep、额外的全局＜style＞）

一、简介

在很多vue的组件库 , 如vant，elementUI， iview等都可能自定义一些样式文件，如果我们在项目中引入了样式组件或者通过v-html渲染了数据，然后想要去修改他们内部的某元素的样式, 直接修改样式很可能不起作用，修改无效, 但如果直接去掉scoped话又会影响全局样式，令人头疼。
本文是介绍：样式穿透和额外的全局的方式来解决该问题。

二、具体实例

以v-html渲染的数据为例：

页面初始样式：

<div>父组件<div class='parent' id='parent' v-html="html"></div></div>data() {  return {    html: '<div>这是通过v-html渲染的元素 <button id="btn">点击按钮</button></div>'  }},

页面初始效果：

① >>>

进行样式穿透，但是只适用于原始CSS，不适用于 Sass、Less等预处理器。

<style scoped>>>> #btn {  width: 150px;  height: 30px;}</style>

页面效果：

② /deep/

进行样式穿透，既适用于CSS，适用于Sass、Less等预处理器，但问题是在vue-cli3以上版本创建的vue项目不再被支持。

<style scoped>/deep/ #btn {  width: 150px;  height: 30px;  background-color: green;}</style>

页面效果：

③ ::v-deep

进行样式穿透，既适用于CSS，适用于Sass、Less等预处理器，在vue-cli3以上版本创建的vue项目才也会被支持。

<style scoped>::v-deep #btn { width: 150px; height: 30px; background-color: yellow;}</style>

页面效果：

④ :deep

进行样式穿透，既适用于CSS，适用于Sass、Less等预处理器，在某些版本的vue中不支持::v-deep，就可使用它进行替代：

<style scoped>:deep #btn { width: 150px; height: 30px; background-color: red;}</style>

页面效果：

⑤ 独立的

使用一个额外的不加 scoped 属性的标签专门书写目标元素的样式，但这种方法相当于把这里面的样式放到了全局作用域，可能会影响其他页面的样式，轻易不要使用。

<style>#btn { width: 150px; height: 30px; background-color: blue}</style>

页面效果：