element UI 中表单输入框的样式修改，深度选择器_element ui :deep修改分页器中输入框的大小css

输入框代码：

<el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="login.name"></el-input>
1

修改前：

修改后

查看修改前的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%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

深度选择器

<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;
}
1
2
3
4
5
6
7