国际网站建设经验,短视频推广营销,专业行业网站开发报价,wordpress怎么清除缓存一、scoped原理
在vue页面的css中，有一个设置为scoped，使用以后dom的节点会出现下面的规则。其实我们打完包就是一个html页面，如果不做处理，将会导致css混乱。 给HTML的DOM节点加一个不重复data属性(形如:data-v-123)来表示他的唯一性在每句css选择器的末尾(编译后的生成的…一、scoped原理
在vue页面的css中，有一个设置为scoped，使用以后dom的节点会出现下面的规则。其实我们打完包就是一个html页面，如果不做处理，将会导致css混乱。
给HTML的DOM节点加一个不重复data属性(形如:data-v-123)来表示他的唯一性在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-123])来私有化样式如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性我们在vite框架中，引入element-plus组件，在App.vue中，输入下面代码：
templatemainel-input placeholder="测试代码" class="ipt"/el-input/main
/template
script setup lang='ts'
import { ref,reactive } from 'vue'
/script
style scoped lang="less"
.ipt{width: 300px;margin: 100px 400px;
}
/style样式就会出现id或class[随机data编码] 通过上图，我们如果要修改 el-input__inner的颜色
.ipt{width: 300px;margin: 100px 400px;.el-input__inner{background: red;}
}运行代码，发现没有变颜色，我们看看源代码 他后面跟的是[data-v-7a7a37b1], 但是源码后面没有data属性，导致无法识别。解决方法，见下面样式穿透。
二、样式穿透
有一些vue常用的组件库，某些样式无法满足我们的需求，需要进行改动，这时就需要用到样式穿透。上面我们无法修改背景颜色，可以使用deep函数来解决，也就是样式穿透。
.ipt{width: 300px;margin: 100px 400px;//这里deep是个函数，参数就是选择器，后面的内容就是样式。//作用是将属性选择器前移到父级后面，这个父级是.ipt。:deep(.el-input__inner){background: red;}
}
