深度选择器/deep/,关于elementui样式修改不了的问题完美解决

  • Post author:
  • Post category:其他

深度选择器/deep/

在vue-elementui写项目时,时常elementui的效果不理想,但是又没办法直接修改elementui的样式
在这里插入图片描述
因为我们无法通过普通的选择器获取到我们要更改的标签【elementui自己加了一层】,

  • 通常的解决办法是在全局css中,寻找到我们要更改标签的class【elementui自定义的class】,但是这样的话,会影响到所有对应的标签,例如:我更改了el-input__inner的字体颜色,那么所有使用到的el-input颜色都会对应改变,这显然是不合理的
  • 在此引出,深度选择器/deep/,他可以通过一个父标签,深度寻找到子标签
    1.这种情况是无法找到的,因为在当前的页面,你并没有定义.el-input__inner这个选择器,这个是elementui后续自己加上的
    在这里插入图片描述
    2.这样的话就完美解决了,因为/deep/可以深度查找到.el-input__inner
    在这里插入图片描述

版权声明:本文为qq_52347540原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。