css有用的小技巧（vue2）

1、希望悬浮的时候，img图标的src改变

<template>
    <div style="padding: 20px">
        <img src="../static/icon/1.svg">
    div>
template>
<style scoped>
    img:hover {
        content: url(../static/icon/2.svg);
    }
style>

2、希望鼠标悬浮在el-input上的时候，另一个dom能发生改变

注意这里的input和iconButton是css类名

.input:hover .iconButton {
  background-color: #337DFF;
 
}

3、页面有好多el-input，只希望其中一个的原始样式更改，别的不影响

此时，类名为input下的e-input样式更改

.input {
  margin-top: 22px;
  position: relative;
  float: right;
  margin-right: 15px;
  border: 1px solid #DCDFE6;
  border-radius: 2px 0px 0px 2px;
 
  & /deep/ .el-input__inner {
    border: none;
  }
 
}

4、希望改变页面所有的el-input样式

/deep/ .el-button {
  border-radius: 2px;
}
 
//上面代码vscode标红，用下面的
 
::v-deep .el-button {
  border-radius: 2px;
}