Scoped CSS
- 限定了范围的css
- 无法影响外部元素
- 外部样式一般不影响内部
- 可以通过/deep/或>>>穿透
Vue中的css
- style可以写在.vue中
- 模拟Scoped CSS
- 方案一:随机选择器
- css modules
- 方案二:随机属性
- <div abcdefg>
- div[abcdefg]{}
- 方案一:随机选择器
- vue工具vue-cli
vue init webpack来创建项目
<style scoped>
.demo{
color:red
}
</style>
或者
<div :class="$style.demo">Hello World</div>
<style module>
.demo{
color:red
}
</style>