当前位置：首页 > news >正文

Web前端之vue+element-puls的el-form-item实现label和内容换行、同时具有多个类名才起作用的条件样式写法、css类名条件判断、多条件选择器、样式选择器、initial

news 2026/4/3 18:01:43

前言

elemnet-plus的el-form-item组件label和内容默认在同一行显示，如何将el-form-item中的label和内容换行呢？
首先要明白什么会这样，通过查找发现label和内容的父容器使用display: flex;布局。既然知道问题大所在，那么就好解决了。

html

<el-form-itemclass="wrap"label="title"><el-row><el-col:span="12"><el-tree:data="tree"show-checkboxnode-key="id":props="{ children: 'children', label: 'label', }"/></el-col></el-row></el-form-item>

style

.wrap.el-form-item{display:initial!important;}
.wrap.el-form-item两个类连在一起表示，当这个标签同时出现这两个类时才这个组合的属性才会起作用，单独有一个不起作用。

多条件选择器

需求描述

在CSS中，如果希望某个样式只在同时满足多个条件时起作用，可以使用类选择器或者属性选择器来选择同时具有两个条件的元素。
这些示例只是演示了一些基本的选择器，具体的选择器和条件可能会因项目结构而有所不同。选择器的使用可以根据实际情况来调整，以确保只有同时满足多个条件的元素才会应用相应的样式。

类选择器

这里的样式只会应用在同时具有类a和类b的元素上
<divclass="a b"></div>
.a.b{color:red;}

属性选择器

这里的样式只会应用在同时具有属性c和属性data-type="d"的元素上
<divclass="c"data-type="d"></div>
[c="c"][data-type="d"]{background-color:blue;}

后代选择器

这里的样式只会应用在具有类a和类b的同时作为.parent的后代的元素上
<divclass="parent"><divclass="a b"></div></div>
.parent .a.b{font-size:16px;}

initial

W3SCHOOL

initial关键字用于将CSS属性设置为其默认值。
initial关键字可用于任何CSS属性和任何HTML元素。

MDN

CSS关键字initial将属性的初始(或默认)值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何CSS属性。这包括CSS简写all，initial可用于将所有CSS属性恢复到其初始状态。
备注：在继承的属性上，初始值可能是意外的。你应该考虑使用inherit，unset，或revert(en-US)关键字代替。