：不（：空）CSSselect器不工作？
我有一个这个特定的CSSselect器的时间，不想工作，当我添加:not(:empty) 。 它似乎适用于其他select器的任何组合：
input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }
如果我删除:not(:empty)部分，它工作得很好。 即使我将select器更改为input:not(:empty)它仍然不会selectinput文本的input字段。 这是打破了，还是我只是不允许使用:empty在一个:not()select器中为:empty ？
我唯一能想到的另一件事是，浏览器仍然说这个元素是空的，因为它没有孩子，只是说一个“价值”。 那么:emptyselect器是否对input元素和常规元素没有单独的function？ 这看起来似乎不太可能，因为使用:empty在一个字段上填空并在其中input内容将导致替代效果消失（因为它不再是空的）。
testingFirefox 8和Chrome。
作为一个空元素 ，由于所有void元素的内容模型总是空的 ，所以<input>元素被HTML空间定义为空 。 所以它们将永远匹配:empty伪类，不pipe它们是否有价值。 这也是为什么它们的值由开始标签中的属性表示的原因，而不是开始和结束标签内的文本内容。
另外，从select器规格 ：
:empty伪类代表一个根本没有孩子的元素。 就文档树而言，只有数据长度不为零的元素节点和内容节点（如DOM文本节点，CDATA节点和实体引用）必须被视为影响空虚;
因此， input:not(:empty)将永远不会匹配正确的HTML文档中的任何内容。 （它仍然可以在假定的XML文档中定义一个可以接受文本或子元素的<input>元素。）
我不认为你可以使用CSS来dynamicdevise空的<input>字段（即只要字段为空就可以应用的规则，而不是一旦input文本）。 如果它们有一个空value属性（ input[value=""] ）或者完全缺less属性（ input:not([value]) ），你可以select最初的空字段。
这可能与内联javascript onkeyup="this.setAttribute('value', this.value);" ＆ input:not([value=""]):not(:focus):invalid
演示： http : //jsfiddle.net/mhsyfvv9/
input:not([value=""]):not(:focus):invalid{ background-color: tomato; }
<input type="email" value="" placeholder="valid mail" onkeyup="this.setAttribute('value', this.value);" />
你可以尝试使用：placeholder-shown …
input { padding: 10px 15px; font-size: 16px; border-radius: 5px; border: 2px solid lightblue; outline: 0; font-weight:bold; transition: border-color 200ms; font-family: sans-serif; } .validation { opacity: 0; font-size: 12px; font-family: sans-serif; color: crimson; transition: opacity; } input:required:valid { border-color: forestgreen; } input:required:invalid:not(:placeholder-shown) { border-color: crimson; } input:required:invalid:not(:placeholder-shown) + .validation { opacity: 1; }
<input type="email" placeholder="e-mail" required> <div class="validation">Not valid</span>
你可能会以不同的方式处理 省略使用:empty伪类，并利用input事件来检测<input>字段中的重要值并相应地设置它：
var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() { var bg = this.value ? 'green' : 'red'; this.style.backgroundColor = bg; }); }
body { padding: 40px; } #inputList li { list-style-type: none; padding-bottom: 1.5em; } #inputList li input, #inputList li label { float: left; width: 10em; } #inputList li input { color: white; background-color: red; } #inputList li label { text-align: right; padding-right: 1em; }
<ul id="inputList"> <li> <label for="username">Enter User Name:</label> <input type="text" id="username" /> </li> <li> <label for="password">Enter Password:</label> <input type="password" id="password" /> </li> </ul>
这应该在现代浏览器中工作：
input[value]:not([value=""])
它select所有具有值属性的input，然后select其中具有非空值的input。
input:not([value=""])
这是有效的，因为我们只在没有空string时才selectinput。
