• vue開(kāi)發(fā)中控制臺(tái)警告： **/deep/ combinator is no longer supported in CSS dynamic profile.**

應(yīng)該是/deep/ 在將來(lái)會(huì)被移除

vue-loader官方文檔中對(duì)于深度選擇器的描述

深度作用選擇器

如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代碼將會(huì)編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之類的預(yù)處理器無(wú)法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

• 由于將來(lái)可能不支持/deep/深度選擇，所以還是建議用>>>,而less中不支持>>>可采用以下方法

  用變量代替>>>符號(hào)

  <style scoped lang='less'>
      @deep: ~'>>>';
      .box {
          @{deep} .title {
  
          }
      }
  </style>
  
  

• ~表示轉(zhuǎn)義

  轉(zhuǎn)義允許您將任意字符串用作屬性或變量值。除插值外，里面的任何東西~"anything"或~'anything'原樣使用。

  .weird-element {
    content: ~"^//* some horrible but needed css hack";
  }
  
  

  結(jié)果是：

  .weird-element {
    content: ^//* some horrible but needed css hack;
  }
  
  

• 選擇器需要加大括號(hào){}

  版本：1.4.0

  // Variables
  @my-selector: banner;
  
  // Usage
  .@{my-selector} {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
  }
  
  

  編譯為：

  .banner {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
  }