我们知道使用》>或者/deep/ 是深层选择器，用来选择子组件里相关的元素，今天还发现了原来》>只能在一个选择器上写一个

 

从上回书我们知道

 

>>> .level{

 

  color: red;

 

}

 

像这样的深层选择器会产生如下的样式

 

[data-v-147fc646] .level{

 

  color: red;

 

}

 

今天改组件库的样式，本来是想写的完美一点

 

>>> .level >>> .level3{

 

  color: red;

 

}

 

结果发现怎么都成不了，打开<style>后发现原来被转换成了

 

[data-v-147fc646] .level >>> .level3{

 

  color: red;

 

}

 

而》>对于浏览器来说不认识，所以该选择器就变成了无效的选择器

 

那如果真要。level下深层选择。level3该如何，其实这里只要用原本的后代选择器即可

 

>>> .level .level3{

 

  color: red;

 

}

 

它被转义为

 

[data-v-147fc646] .level .level3{

 

  color: red;

 

}

 

也就是说Scope CSS里深层选择器的用法，对于》>只会出现一次，多写了反而出错，并且该错误看不到警告或提示。