在 css 中隐藏文本，而在 html 中填写输入字段无效

Question

我在 html 中有一个输入框，如下所示，它工作正常：

.lolan:placeholder-shown+.form__label {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}

<input class="lolan" type="text" id="name" placeholder="Full Name" required />
<label for="name" class="form__label">Click "Download" To Get Your Card</label>

当用户键入文本时，将显示标签。现在我在输入框上方添加了一个标签，它将在输入框被填充之前显示并在输入框被填充之后隐藏。我做了以下代码：

.lolan:placeholder-shown - .form__labell {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}

<label for="name" class="form__labell">Click "Download" To Get Your Card</label>
<input class="lolan" type="text" id="name" placeholder="Full Name" required />

这是行不通的，谁能告诉我这里出了什么问题

Answer 1

相邻兄弟组合子是+，一般兄弟组合子是~：没有像 -

这样的 previuos 相邻兄弟组合器

您可以像第一个示例一样保留标记中元素的顺序，但使用 flexbox 和 order 属性

颠倒它们

div {
 display: flex;
}

input { order: 2 }
label { order: 1 }

input:not(:placeholder-shown) + label {
   opacity: 0;
   visibility: hidden;
   -webkit-transform: translateY(-4rem);
   transform: translateY(-4rem);
}

<div>
  <input class="lolan" type="text" id="name" placeholder="Full Name" required />
  <label for="name" class="form__labell">Click "Download" To Get Your Card</label>
</div>

在 css 中隐藏文本，而在 html 中填写输入字段无效

hiding text in css while input field is filled in html not working

html

css

input

label

hidden