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

---

前言

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

---

html

<el-form-item class="wrap" label="title">
  <el-row>
    <el-col :span="12">
      <el-tree
        :data="tree"
        show-checkbox
        node-key="id"
        :props="{
          children: 'children',
          label: 'label',
        }"
      />
    </el-col>
  </el-row>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

style

.wrap.el-form-item {
  display: initial !important;
}
1
2
3

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

---

多条件选择器

需求描述

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

---

类选择器

这里的样式只会应用在同时具有类a和类b的元素上

<div class="a b"></div>
1

.a.b {
	color: red;
}
1
2
3

---

属性选择器

这里的样式只会应用在同时具有属性c和属性data-type="d"的元素上

<div class="c" data-type="d"></div>
1

[c="c"][data-type="d"] {
	background-color: blue;
}
1
2
3

---

后代选择器

这里的样式只会应用在具有类a和类b的同时作为.parent的后代的元素上

<div class="parent">
	<div class="a b"></div>
</div>
1
2
3

.parent .a.b {
	font-size: 16px;
}
1
2
3

---

initial

W3SCHOOL

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

---

MDN

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

---

关于css默认值更多信息

1、css之initial、unset、revert、默认值继承、浏览器的css属性默认值、w3c的css属性默认值