scoped和/deep/深层选择器原理及问题解决:vue+element-ui项目为何用深层选择器可以解决?为什么有的时候/deep/不好用?如何解决?

style的scoped属性到底是干什么的?为什么element-ui的样式不能直接在组件内修改?

使用scoped可以使组件的css样式不会出现全局污染影响其他组件,

其原理是给当前页面的每一个标签都添加相应的属性,所以当设置该属性时,样式设置都会具体到某一层,

例如:当你在scoped属性下写入样式

 .a .b .c{
   
 color:red
 }

会解析为

 .a[tag1]  .b[tag2]  .c[tag3]{
   
 color:red
 }

而当前组件DOM渲染时会自动给当前页面的对应标签添加对应的tag

例如:

  <div