scss 相同样式中的第一个

271 阅读1分钟

&:first-of-type 相同样式中的第一个

  • html
<el-form-item prop="username" class="elFormItemClass">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" class="elInputClass">
                  <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>

            <el-form-item prop="password" class="elFormItemClass">
              <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>

            <el-form-item prop="code" class="elFormItemClass">
              <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
                <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode">
              </div>
            </el-form-item>
  • css
.elFormItemClass{
      width: 320px;
      margin-left: 60px;
      margin-top: 18px;
      border-bottom: #CBCBCB solid 1px;
      
      &:first-of-type{
        margin-top: 38px;
      }

      .el-input__inner {
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        /*outline: medium;*/
      }
    }