另一个布局利器，CSS伪类：placeholder-shown

一般我们经常使用placeholder伪类选择器修改默认样式复制，突然发现placeholder-shown伪类选择器。更官方的解释是。任何显示占位符文本的表单元素的CSS伪类。简单的说，当显示输入框的占位符内容时，输入框做了什么。兼容性如下，移动端没问题placeholder-show是如何工作的：placeholder-shownCSS伪类在或元素显示占位符文本时生效。简单的说就是占位符有值时才生效，如下所示：//html<inputplaceholder="placeholdertext"/><textareaplaceholder="placeholdertext">//cssinput:placeholder-shown,textarea:placeholder-shown{border:1pxsolidpink;}如果placeholder为空可以使用:placeholder-shown来设置输入元素的样式。input:placeholder-shown{border:1pxsolidpink;background:yellow;color:green;}注意一些奇怪的问题？？-我们设置颜色：绿色，但它不起作用。这是因为:placeholder-shown只会针对输入本身。对于实际的占位符文本，必须使用伪元素::占位符。input::placeholder{color:green;}我注意到如果应用::placeholder-shown，还有一些其他属性也会影响占位符的样式。input:placeholder-shown,textarea:placeholder-shown{font-style:italic;text-transform:uppercase;letter-spacing:5px;}不知道这是什么，可能是placeholder继承了这些属性，如果知道原因的请留言告诉我，谢谢。:placeholder-shownvs:empty:placeholder-shown是专门用来判断元素是否显示占位符的对象，我们主要用它来检查输入内容是否为空（假设所有输入都有占位符）。这里你可能会想，是不是可以用empty呢？让我们来看看。//html//cssinput:empty{border:1pxsolidpink;}input{border:1pxsolidblack;}似乎empty在这里起作用，因为我们看到我得到一个粉红色的边框，但这实际上不起作用？？它是粉红色的原因是伪类增加了css的权重。类似于类选择器（即.form-input）比类型选择器（即input）具有更高的权重。高权限选择器将始终覆盖低权限设置的样式。所以我们可以这样说：不要使用:empty来检查输入元素是否为空。如何检查输入内容是否为空（没有占位符）？我们可以检查输入是否为空的唯一方法是使用:placeholder-shown。但是如果我们的输入元素没有占位符会怎样呢？这里有一个技巧：传入一个空字符串“”。//html//cssinput:placeholder-shown{border-color:pink;}结合其他选择器我们可以使用:not伪类到一些事情逆转了。如果输入不为空，我们可以在这里定位。//html//cssinput:not(:placeholder-shown){border:1pxsolidgreen;}在实战中使用placeholder-shown，我们可以实现如下动态效果。具体代码如下：Htmlmailbox