CSS-Placeholder-Shown伪类有什么用？

使用这个伪类来设置当前显示占位符文本的输入的样式，换句话说，用户没有在文本框中输入任何内容？？根据您的输入是否为空应用一些动态样式会不会很好？?input:placeholder-shown{border-color:pink;}它是如何工作的？:placeholder-show是一个CSS伪类，它允许您将样式应用于带有占位符文本的或。<inputplaceholder="placeholdertext"/><textareaplaceholder="placeholdertext">结果：如果显示占位符，它将是粉红色，表示用户没有输入任何内容如果没有显示占位符，它将是黑色，表示用户输入了一些东西：placeholder-showd必须有一个占位符如果元素没有占位符文本，这个选择器将没有效果。input:placeholder-shown{border-color:pink;}:placeholder-shownvs::placeholder因此，我们可以使用:placeholder-shown来设置输入元素的样式。input:placeholder-shown{border:1pxsolidpink;background:yellow;color:green;}??嗯...注意到一些奇怪的东西??-我们将颜色设置为：绿色，但它不起作用。好吧，这是因为:placeholder-shown仅针对输入本身。但是对于实际的占位符文本，您必须使用伪元素::placeholder。input::placeholder{color:green;}但是！在处理此问题时，我注意到还有一些其他属性，如果在:placeholder-shown级别应用，将会影响占位符文本。input:placeholder-shown{font-style:italic;text-transform:uppercase;letter-spacing:5px;}现在，我真的不知道为什么会这样？？？？可能是因为这些属性被占用位继承了。:placeholder-shownvs:empty虽然:placeholder-shown专门用于确定元素是否显示占位符。我们实际上可以使用它来检查输入是否为空（当然，假设所有输入都有一个占位符）。所以也许你的下一个问题是，我们不能使用空的CSS吗？好吧，让我们检查一下??????input:empty{border:1pxsolidpink;}input{border:1pxsolidblack;}expects:pinkifemptyandblackifnotempty好吧...从这里你可能会想：empty似乎正在工作，正如我们看到的那样带有粉红色边框。但这实际上不起作用？显示粉红色的原因是因为伪类增加了特异性，类似于类选择器（即.form-input）比类型选择器（即input）具有更高的特异性。高特异性选择器将始终覆盖低特异性设置的样式。这是判决书！不要使用:empty来检查输入元素是否为空？你如何检查没有占位符的输入是否为空？好的，所以我们检查输入是否为空的唯一方法是使用:placeholder-shown。但是如果我们的输入元素没有占位符会怎样呢？好吧，这是一个聪明的技巧！传入一个空字符串“”。input:placeholder-shown{border-color:pink;}结合其他选择器所以，我们可以定位显示占位符文本的Enter元素，这很酷。换句话说，如果显示了占位符文本，则一定意味着该元素为空。利用这些知识，我们可以将这个伪类与其他选择器结合起来做一些非常巧妙的事情！我们来看看??。Reverse:placeholder-shownfor:not我们可以使用:not伪类来做一些相反的事情。在这里，我们可以在输入不为空的情况下进行目标操作。input:not(:placeholder){border-color:green;}结果：绿色，如果不为空，说明用户输入了一些东西。如果黑色浮动标签为空，则使用占位符而不是标签的问题之一是可访问性，因为一旦您键入，占位符文本就会消失，这可能会导致用户感到困惑。一个非常好的解决方案是浮动标签。最初，占位符文本显示时没有标签，一旦用户开始键入，标签就会出现。这样，您仍然可以在不影响用户体验和可访问性的情况下保持表单简单。双赢??这可以通过纯CSS实现，我们只需要将placeholder-shown与:not和+结合起来。这是浮动标签的超级简化版本。NAMElabel{display:none;position:absolute;top:0;}input:not(:placeholder-shown)+label{display:block;}浏览器对:placeholder-shown的支持非常好！这包括InternetExplorer（是的，我和你一样惊讶？？）。但是，对于IE，您需要使用非标准名称：-ms-input-placeholder。