当我的用户输入有效/无效时，为什么我的类不显示

Question

我是新手，如果我的问题措辞怪异，我很抱歉。我正试图让一个特定的p标签显示出来，这取决于用户输入是否有效。

<input id="user-deposit" type="number" value="0" min="0" step="5" max ="500" onkeyup=imposeMinMax(this)>

<div class="prompt">
<p class="confirm">A</p>
<p class="error">B</p>
</div>

这是我的css

.prompt {
display: none;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
input:invalid+p.error {
display: block;
}
input:valid+p.confirm {
display: block;
}

Answer 1

需要更正CSS选择器。这里已经更新了选择器。您必须使用input:invalid+.prompt>p.error, input:valid+.prompt>p.confirm来选择这些元素。

.confirm, .error {
display: none;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
input:invalid+.prompt>p.error,
input:valid+.prompt>p.confirm{
display: block;
}

<input id="user-deposit" type="number" value="0" min="0" step="5" max="500">
<div class="prompt">
<p class="confirm">A</p>
<p class="error">B</p>
</div>