vue组件中经常使用scope来使样式只在组件内生效。原因就是attribute 会自动添加一个唯一的 attribute为组件内 CSS 指定作用域，然后使用CSS的属性选择器自动生成样式范围。
然而在使用Element或者vant这种UI库的时候，在scope的CSS内修改UI库的样式，有的时候能修改成功，有的时候会修改失败。
查看控制台，原因就是属性选择器的问题。
Vue只会在一级DOM内生成指定attribute,然而CSS都会加上属性选择。所以UI库内嵌套的标签不会生成attribute，,CSS中却使用了属性选择器，也就造成样式失效
image.png
image.png
网友评论