Question

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

input:empty{border:1px solid green}
<input type= "text" >

在Chrome中，输入始终为绿色边框（当值也不为空时......）

https://jsfiddle.net/5aczpv3j/5/

Answer 1

:empty查找子元素，向<input>元素添加文本不会更改此元素。你的问题的前提是有缺陷的。

Answer 2

表单元素的值不是文本（因此），自闭元素不能保存子元素，<input type="text"/>因此总是:empty ...

＆＃13;

p,input,textarea{
    border: 3px solid blue;
    line-height:2em;
    min-height:2em;
}
p:empty,input:empty,textarea:empty{
    border: 3px solid red;
}

＆＃13;

<p>Not empty</p>
<p></p>
<p> </p>
<form action="">
    <input type="text"/>
    <br/>
    <input type="text" value="Empty"/>
    <br/>
    <textarea></textarea>
    <br/>
    <textarea> </textarea>
</form>

＆＃13;

注意当输入字段返回空时，带有空格的段落和textarea是否为空（因此为蓝色边框），即使使用value属性也是如此？

为什么不使用：有效和/或：无效（IE10 +）或者使用JavaScript？

为什么：空的不能正确处理输入？

2 个答案: