CSS中的/deep/理解

一、含義

　　/deep/ 深度選擇器

二、用法

　　在vue中，我們為了避免父組件的樣式影響到子組件的樣式，會在style中加<style scoped>，這樣父組件中如果有跟子組件相同的class名稱或者使用選擇器的時候，就不會影響到子組件的樣式。

　　我們在加了 scoped 之后樣式會自動添加一個hash值。比如下面所示：

.title[data-v-211e4c4a] {
    color: #ff0;
}

　　當你想在父組件修改子組件的樣式，就需要使用/deep/。比如下面所示：

<style scoped>
     /deep/ .title{
        color: #ff0;
    }
</style>

三、>>>、/deep/以及::v-deep

　　以上三種的效果均是在父組件改變子組件的樣式。　　

　　一些預處理器（例如Sass）可能無法正確解析>>>。在這些情況下，可以改用/deep/或::v-deep組合器，兩者都是它的別名，並且和>>>工作原理完全相同。