/deep/ .el-drawer__body div:first-child { padding: 10px 20px !important; } 只改变当前类下的第一个div并且不改变内部div怎么做
时间: 2024-02-21 08:59:53 浏览: 26
如果你想在 `.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还提供了一些内置的样式类,可以用于自定义抽屉或者对话框的样式,比如设置背景颜色、边框样式等等。
<el-drawer :title="title" :visible.sync="table" weight="300px" direction="rtl" append-to-body :close-on-click-modal="false" class="drawer-title" style="height:70%;margin-top:140px;padding:0"> <edit ref="form" v-if="table" v-model="dataPO" /> </el-drawer>
这段代码是使用 Element UI 组件库中的 el-drawer 组件创建一个抽屉弹窗,其中包含一个标题(title)、一个可见性变量(visible)、一个宽度(weight)、一个方向(direction)、一个是否追加到 body 元素下的变量(append-to-body)、一个是否在点击背景遮罩层时关闭弹窗的变量(close-on-click-modal)、一个样式类名(class)、一个样式对象(style)以及一个子组件 edit。子组件 edit 是一个自定义组件,使用 v-if 控制其显示和隐藏,并且通过 v-model 绑定数据,即 dataPO。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)