H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

【Vue】CSS样式覆盖问题?

代码

  input {
&:focus {
border-top: 0px;
border-left: 0px;
border-right: 0px;
box-shadow: 0;
}
}

期望效果

.login-form input:focus {
border-top: 0px;
border-left: 0px;
border-right: 0px;
-webkit-box-shadow: 0;
box-shadow: 0;
}

页面实际效果

.login-form input:focus {
border-top: 0px;
border-left: 0px;
border-right: 0px;
// -webkit-box-shadow: 0;
// box-shadow: 0;
}
.ivu-input:focus {
border-color: #57a3f3;
outline: 0;
box-shadow: 0 0 0 2px rgba(45,140,240,.2);
}

请问我改怎么写?覆盖原来的 .ivu-input:focus 样式?

回答

1.看看样式设置层级
2.通过id、class覆盖
3.!important 覆盖
4.框架样式引用在前、自己样式放在最后加载避免样式覆盖 原有样式没有覆盖 在浏览器检查标签看样式加载没

页面里在多写一个style,不要写scoped就可以修改iview的样式了,最好在外层嵌套一个div,防止污染的别的地方使用到iview的组件样式。当然你也可以使用 深度选择器>>>去修改(不支持less)
【Vue】CSS样式覆盖问题?

代码里面改: box-shadow:0 !important;

本文地址:H5W3 » 【Vue】CSS样式覆盖问题?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址