标签：知识点 form el 样式 元素 deep item

前端深入样式/deep/相关知识

 

1.描述：在使用vue-cli和elementUI开发前端项目时，会遇到在选择行内表单，一行多个元素时，label标签和输入框之间自动换行。如图所示

 

 

 一般我们会对标签直接使用style属性进行样式调整，要想将样式代码放入到<style>中，而组件在被渲染后会有很多层，怎样将样式直接加到对应输入框元素上

 

就用到前端/deep/深入样式 

 

 

 有时可能需要深入好几层才能到达需要直接控制的元素，其实我们可以直接些最外层父元素的类名，然后/deep/到需要调整的内层元素类名就好。

例如：

.el-form-item /deep/ .el-form-item__content {     width: calc(100% - 100px);   }     然而当我们都弄好了，进行  npm run serve，发现报错了，如图。  

 

度娘了一下，发现是sass预处理器无法正确解析可以将 /deep/改成::v-deep 即可

即

.el-form-item ::v-deep .el-form-item__content {     width: calc(100% - 100px);   }

 

标签：知识点,form,el,样式,元素,deep,item
来源： https://www.cnblogs.com/XiaoOuketang/p/16252995.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。