消失的幽灵：关于:placeholder-shown的碎碎念 最近，我迷上了一个CSS伪类，一个名字听起来有点像科幻电影里隐形人存在的家伙：:placeholder-shown。初次见面，我还以为它只是个平平无奇的属性，无非就是让表单的占位符（placeholder）在显示的时候，可以做点样式上的小文章。但深入了解之后，我发现它背后隐藏着许多关于用户体验、交互设计，甚至是对“可见性”本身的思考。 与其说这是一篇书评，不如说是我在和 :placeholder-shown 这个“幽灵”对话后，产生的一堆碎碎念。它就像一个潜伏在表单里的透明小精灵，默默地影响着用户的感知和行为。 占位符的困境：你看到我，还是看不到我？ 首先，我们得承认，占位符本身就是一个充满争议的存在。一方面，它能给用户提供输入提示，减少认知负担，让表单看起来更简洁。想象一下，一个空荡荡的输入框，如果没有占位符的指引，用户可能会一脸茫然：“这里该填什么？姓名？邮箱？还是暗号？” 但另一方面，占位符也存在着固有的缺陷。一旦用户开始输入，它就会消失得无影无踪，仿佛从未存在过。这意味着用户可能需要记住输入框的目的，或者清空输入框重 …
伪类与伪元素：`::before`, `::after` 的创意与实用技巧
“伪”装大师：用 ::before 和 ::after 玩转CSS的小心机 第一次听到“伪类”、“伪元素”这两个词，我脑海里浮现的是金庸小说里的易容术，或者《碟中谍》里那些高科技的变脸面具。CSS的世界里，它们没有那么惊险刺激，但同样能玩出不少花样，特别是 ::before 和 ::after 这对形影不离的兄弟，简直是CSS世界里的“伪”装大师。 与其说它们是“伪”，不如说是CSS赋予我们的“障眼法”，让我们能够在不修改HTML结构的前提下，给页面元素添加额外的内容和样式。这就像给美女化妆，不用动刀子，就能让她更靓丽动人。当然，如果用不好，也可能变成车祸现场，让页面丑到不忍直视。 我一直觉得，学习CSS就像学习一门外语，语法规则是单词，而 ::before 和 ::after 则是语法中的“副词”，用好了能让你的表达更生动形象，用不好就会显得语句僵硬，缺乏灵魂。 初识“伪”装大师：::before 和 ::after 的基本功 这对“伪”装大师的基本用法并不复杂，它们都需要结合 content 属性来定义要插入的内容。::before 在元素内容之前插入，::after 在元素内容之 …