在vue專案中的style標籤裡

1.Scoped

·當 <style> 標籤有 scoped 屬性時，它的 CSS 只作用於當前元件中的元素， 父元件的樣式將不會滲透到子元件中。

2.子元件的根元素

使用 scoped 後，父元件的樣式將不會滲透到子元件中。不過一個子元件的根節點會同時受其父元件的 scoped CSS 和子元件的 scoped CSS 的影響。這樣設計是為了讓父元件可以從佈局的角度出發，調整其子元件根元素的樣式

3.混用本地和全域性樣式

你可以在一個元件中同時使用有 scoped 和非 scoped 樣式：

<style>
/* 全域性樣式 */
</style>

<style scoped>
/* 本地樣式 */
</style>
 

5.深度作用選擇器

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

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

上述程式碼將會編譯成：

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

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

< style lang="scss" scoped>
     /deep/.test{
     color:red;
}
</style>
 

/deep/不生效時，用::v-deep代替
若發現終端報錯，並指明是/deep/這塊的錯誤可用 ::v-deep代替

< style lang="scss" scoped>
     ::v-deep .login_container{
     background-color:red;
}
</style>

6.動態生成的內容

通過 v-html 建立的 DOM 內容不受 scoped 樣式影響，但是你仍然可以通過深度作用選擇器來為他們設定樣式