另一个布局工具，CSS伪类：placeholder-shown

作者：SamanthaMing积极向上的态度让人分享。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。一般我们经常使用占位符伪类选择器来修改默认样式和文案。突然，我们发现了占位符显示的伪类选择器。比较官方的解释是CSS伪类代表任何显示占位符文本的表单元素。简单的说，当显示输入框的占位符内容时，输入框做了什么。兼容性如下，移动端没问题placeholder-show是如何工作的？:placeholder-shownCSS伪类在或元素显示占位符文本时生效。简单的说，只有placeholder有值时才生效，如下图：//html<inputplaceholder="placeholdertext"/><textareaplaceholder="placeholdertext">//cssinput:placeholder-shown,textarea:placeholder-shown{border:1pxsolidpink;}如果占位符为空placeholder-show无效：//html:placeholder-shown与::placeholder我们可以使用:placeholder-shown来设置输入元素的样式。input:placeholder-shown{border:1pxsolidpink;背景：黄色；color:green;}注意到奇怪的地方了吗？-我们设置颜色：绿色，但它不起作用。这是因为:placeholder-shown只会针对输入本身。对于实际的占位符文本，必须使用伪元素::占位符。input::placeholder{color:green;}??我注意到如果应用::placeholder-shown，还有一些其他属性也会影响占位符的样式。input:placeholder-shown,textarea:placeholder-shown{字体样式：斜体；文本转换：大写；letter-spacing:5px;}不知道怎么回事，可能是placeholder继承了这些属性，有知道原因的请留言告诉我，谢谢。:placeholder-shownvs:empty:placeholder-shown是专门用来判断元素是否显示占位符的对象，我们主要用它来检查输入内容是否为空（假设所有输入都有占位符）。这里你可能会想，是不是可以用empty呢？让我们来看看。//html//cssinput:empty{border:1pxsolidpink;}input{border:1pxsolidblack;}这里看起来是空的因为我们看到了一个粉红色的边框，但这实际上不起作用？它是粉红色的原因是伪类增加了css的权重。类似于类选择器（即.form-input）比类型选择器（即input）具有更高的权重。高权限选择器将始终覆盖低权限设置的样式。所以我们可以这样说：不要使用:empty来检查输入元素是否为空。如何检查输入内容是否为空（没有点）？我们可以检查输入是否为空的唯一方法是使用:placeholder-shown。但是如果我们的输入元素没有占位符会怎样呢？这里有一个技巧：传入一个空字符串“”。//html//cssinput:placeholder-shown{border-color:pink;}结合其他选择器我们可以使用:not伪类来反转一些东西。如果输入不为空，我们可以在这里定位。//html//cssinput:not(:placeholder-shown){border:1pxsolidgreen;}实战用placeholder-shown我们可以实现下面的有效工具代码如下：Html邮箱