vue、deep 重新样式没有生效问题

背景：引用了一个组件vxe-table，使用less重新某个图标样式想要改变排序图标向上箭头的样式，于是重新右侧的css，但是没有效果/deep/ .vxe-icon--caret-bottom:before, .vxe-icon--caret-left:before, .vxe-icon--caret-right:before, .vxe-icon--caret-top:before {bord

Cookysurongbin

2684人浏览 · 2020-10-23 15:38:54

Cookysurongbin · 2020-10-23 15:38:54 发布

背景：

引用了一个组件vxe-table，使用less重新某个图标样式

想要改变排序图标向上箭头的样式，于是重新右侧的css，但是没有效果

/deep/ .vxe-icon--caret-bottom:before, .vxe-icon--caret-left:before, .vxe-icon--caret-right:before, .vxe-icon--caret-top:before {
  border-width: 5px !important;
}

后来发现竟然是因为这样写/deep/ 并排css只有第一个生效

方法一：分开写

/deep/ .vxe-icon--caret-bottom:before{
  border-width: 5px !important;
}
/deep/ .vxe-icon--caret-top:before{
  border-width: 5px !important;
}

方法二：每个写deep

/deep/ .vxe-icon--caret-bottom:before, /deep/ .vxe-icon--caret-left:before, /deep/ .vxe-icon--caret-right:before, /deep/ .vxe-icon--caret-top:before {
  border-width: 5px !important;
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^