/deep/ .el-drawer__body div:first-child { padding: 10px 20px !important; } 只改变当前类下的第一个div并且不改变内部div怎么做
时间: 2024-02-21 10:59:53 浏览: 103
如果你想在 `.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>
这段代码是一个 `Vue` 组件的模板部分,包含了以下内容:
- 一个名为 `view` 的元素,可能是组件的根元素或者容器元素,具体需要看上下文的代码。
- 一个 `el-row` 元素,表示一个行容器,包含了以下属性:
- `justify="center"` 表示该行容器内部的列容器在水平方向上居中对齐。
- `:gutter="10"` 表示该行容器内部的列容器之间的间隔为 `10`。
- `style="margin-bottom: 100px"` 表示该行容器的下方留出 `100px` 的外边距。
- 在 `el-row` 元素内部,使用 `v-for` 指令遍历 `books` 数组中的每一个元素,并使用 `el-col` 元素来创建列容器。其中 `v-for` 指令中的 `item` 表示当前遍历的元素,`:key="item.id"` 用于为每个列容器指定一个唯一的键值,以优化性能。`:span="5"` 表示每个列容器占据 `24` 栅格中的 `5` 栅格,即宽度为 `20%`。
- 在 `el-col` 元素内部,使用 `div` 元素创建一个名为 `bookBox` 的容器,并使用 `@click` 事件绑定一个函数,当用户点击该容器时触发。其中 `nowBook=item` 表示将当前点击的书籍信息保存到 `nowBook` 变量中,`drawer=true` 表示打开一个侧边栏组件。`shadow="always"` 表示该容器一直显示阴影效果。
- 在 `bookBox` 容器内部,使用 `img` 元素来显示书籍的封面图片,`:src="`http://onlinebookstore.qylh.xyz/bookImg/${item.src}`"` 表示使用服务器上的图片资源。
- 在 `bookBox` 容器内部,使用 `div` 元素来显示书籍的名称和价格信息,并使用 `el-button` 元素来创建一个按钮,表示书籍的价格。
阅读全文