iview和elementUI是我們在用vue開發專案時比較常用到的ui元件，在我們使用第三方UI元件庫開發時有時需要對這些元件進行一些樣式修改。
為了vue頁面樣式模組化，不對全域性樣式造成汙染，我們往往都會加入scoped屬性用來限制樣式的作用域，然而這也會導致當我們修改部分ui元件樣式失效。為了避免這種情況，我們常用以下方式來解決。

一、新建一個不含scoped的style標籤覆蓋元件樣式

不推薦使用，因為如果命名衝突會導致其他樣式覆蓋異常

<style scoped>
	/*頁面樣式*/
</style>
// ui元件覆蓋
<style>
  .home .ivu-card-body {
    height: 345px;
  }
</style>
 

一、深度作用選擇器（ >>> ）

<style scoped>
.box >>> .content {
  font-size:20px;
}
</style>

二、/deep/ 前處理器less下使用

深度選擇器/deep/與>>>作用相同

<style scoped lang="less">
.select {
     /deep/ .ivu-card-body {
        width: 100%;
      }
    }
</style>

然而最近谷歌瀏覽器對於/deep/貌似不太友好，控制檯提示/deep/將要被移除。

[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/features/4964279606312960 for more details.

所以我們也可以在less下另類呼叫>>>，如下：

// 採用的less的轉義和變數插值
<style scoped lang="less">
@deep: ~'>>>';
.select {
     @{deep} .ivu-card-body {
        width: 100%;
      }
    }
</style>

綜上。
參考：Vue高版本中一些新特性的使用詳解