Vue 关于scoped范围限制后无法选中某些el-input组件记录

在Vue项目中,作者遇到Scoped CSS无法选中特定组件样式的问题,尤其是在el-input内的textarea组件。通过研究,发现使用深度作用选择器可以解决这一难题,确保样式仅在局部生效,避免全局污染。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在写个小的DR网页的时候,碰到一个问题郁闷许久,因为不想自己写的component css 污染全局,所以想在 css 中带上scoped去限制范围,但是这样导致一直无法选中el-input中的真正的textarea组件,在做了一些research以后发现可以使用深度作用选择器来选中自己想要的组件。无法选中的根本原因是因为加了scoped以后,在el-input组件的div上加了个不重复的id,导致我想选中textarea最终css选择器必须是这样的:.container .form .el-form-item .textarea[data-v-542f2b52] textarea, 但是我在代码中正常写.container .form .el-form-item .textarea textarea 只会变成.container .form .el-form-item .textarea textarea[data-v-542f2b52]这样,所以一直没办法选中,最终使用了深度作用选择器以后是这样写的:.container .form .el-form-item .textarea /deep/ textarea,这个最终在浏览器显示的选择器就会是我们想要的.container .form .el-form-item .textarea[data-v-542f2b52] textarea这个了。在这里插入图片描述最后附上查询到知识点的详细链接。scoped父组件覆盖子组件css

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值