文章目录
- 前言
- 一、:deep()是什么?
- :deep()是可以改变css解析时私有属性的样式
- 常见使用场景: 如改变输入框的背景颜色
- 使用:deep()修改背景颜色
- 总结
前言
对应前端小白来说,一看到:deep()这些模式的用法就不理解是啥意思,下面简单介绍一下:deep()是什么以及如何使用。
一、:deep()是什么?
:deep()是可以改变css解析时私有属性的样式
常见使用场景: 如改变输入框的背景颜色
我们找到解析时找到输入框的class
使用:deep()修改背景颜色
<route lang="yaml">meta:title: 测试界面</route><script lang="ts" setup>import Draggable from 'vuedraggable'const reason = ref('')</script><template><div class="select_text c-red">选择器</div><div class="outer"><el-inputv-model="reason"type="textarea":autosize="{ minRows: 3, maxRows: 5 }"show-word-limitmaxlength="100"/></div></template><style lang="scss" scoped>:deep() {.el-textarea__inner{background: red;}}</style>
总结
这个实现例子虽然简单,但是对于小白来说,还是要一点时间去理解的,希望能帮助到您!