/deep/ .el-drawer__body div:first-child { padding: 10px 20px !important; } 只改变当前类下的第一个div并且不改变内部div怎么做

如果你想在 `.el-drawer__body` 类下只改变第一个 div 元素的样式，而不影响内部的 div 元素，可以使用以下选择器：

.el-drawer__body > div:first-child {
  padding: 10px 20px !important;
}

这个选择器中的 `>` 符号表示只选中 `.el-drawer__body` 的直接子元素中的第一个 div 元素，而不包括子元素中的其他 div 元素。这样就可以只改变当前类下的第一个 div 元素，并且不改变内部的 div 元素了。

相关问题

.el-drawer__body

.el-drawer__body是Element UI框架中的一个组件，用于实现侧边抽屉式的导航栏或者弹出式的对话框。该组件包含在el-drawer组件中，主要负责渲染抽屉或者对话框的主体内容。使用.el-drawer__body组件可以实现在页面中展示不同类型的内容，比如表单、列表、图片、文本等等。

同时，.el-drawer__body还提供了一些内置的样式类，可以用于自定义抽屉或者对话框的样式，比如设置背景颜色、边框样式等等。

<view> <el-row justify="center" :gutter="10" style="margin-bottom: 100px"> <el-col class="hvr-grow-shadow" v-for="item in books" :key="item.id" :span="5"> <div class="bookBox " shadow="always" @click="nowBook=item;drawer = true"> <img :src="`http://onlinebookstore.qylh.xyz/bookImg/${item.src}`" class="image" /> <div style="padding: 14px"> <span>{{item.name}}</span> <div class="bottom"> <el-button type="danger" style="padding:10px" class="button" >￥{{item.price}} </el-button> </div> </div> </div> </el-col> </el-row>

这是一个使用了Element UI组件库的Vue.js页面代码，其中包含一个栅格布局（el-row和el-col），用于展示一组书籍。v-for指令用于循环遍历books数组中的数据，每个元素都对应一个el-col列组件，通过:span属性设置每个列的宽度为5份之一。在每个列中，使用了一个div包裹的img和span元素，展示了书籍的封面和名称，同时还有一个底部div显示了书籍的价格。点击书籍后会触发nowBook和drawer这两个变量的改变，控制抽屉组件的显示。