vue css

局部样式
1.Vue中style标签的scoped属性表示它的样式只作用于当前模块,是样式私有化.

2.渲染的规则/原理:
给HTML的DOM节点添加一个 不重复的data属性 来表示 唯一性
在对应的 CSS选择器 末尾添加一个当前组件的 data属性选择器来私有化样式,如:.demo[data-v-2311c06a]{}
如果引入 less 或 sass 只会在最后一个元素上设置

// 原始代码



// 浏览器渲染效果
Vue.js scoped

deep 属性

// 上面样式加一个 /deep/

// 浏览器编译后

你可能感兴趣的:(vue css)