[JavaScript知识库]在elementui中使用样式穿透“＞＞＞“遇到的坑

<div class="content">
    <el-input v-model="mo" placeholder="输入关键词">
      <i slot="suffix" class="el-icon-search"></i>
    </el-input>
  </div>

在上面，我需要对el-input的样式进行修改

因为在vue中每个组件都需要使用scoped，免得样式污染，所以导致我们不能直接修改组件样式

随之诞生的就是样式穿透（只针对CSS样式）

使用条件：使用一个父元素将需要修改的组件包起来

这里修改placeholder字体样式

.content >>> .el-input__inner::-webkit-input-placeholder {
      color:#80c6ce !important;
 }

还遇到一个问题，就是我在修改类名的时候使用了input,当然，在使用的时候是.input进行修改样式，效果没起作用，应该是因为有类名就是input，所以应该避免这种事情发生