只能写一个的深层选择器

我们知道使用》>或者/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里深层选择器的用法,对于》>只会出现一次,多写了反而出错,并且该错误看不到警告或提示。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64068.shtml

张贴在3