输入框代码:
<el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="login.name"></el-input>
修改前:
修改后
查看修改前的CSS样式:
如果我们直接在CSS中修改输入框的样式,会发现修改后的样式并没有被应用上
为了解决这个问题我也找了很多文章,发现可以用 /deep/ 深度选择器 ,也就是在选择器前面加上 /deep/
/* 使用 scoped 后,父组件的样式将不会渗透到子组件中。*/
/* 使用深度作用选择器 /deep/ 或者'>>>' ,但注意像sass、less预处理器不认三个箭头 */
/deep/ .el-input .el-input__inner {
-webkit-appearance: none;
background-color: transparent !important;
background-image: none;
border-radius: 10px;
border: 0px !important;
border-bottom: 1px solid #cdcdcd !important;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: 0;
padding: 0 30px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
}
深度选择器
<style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。
如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符或 /deep/ :
但要注意对于less或者sass等预编译,是不支持 >>> 操作符的,可以使用 /deep/ 来替换 >>> 操作符,例如: .parent /deep/ .child { /* … */ }
PS:经过我的测试,在sass和less中似乎并不支持深度选择器
/deep/ .el-input {
margin-top: 20px;
}
>>> .el-input{
margin-top: 20px;
}