直接用 :placeholder-shown 伪类就行，但它只对 <input> 和 <textarea></textarea> 生效，且必须是原生 placeholder 属性触发的占位符（不是 JS 模拟的）。
如何实现定时触发与自动关闭弹出窗口的联动机制
本文详细探讨了在特定CMS环境…
display
精选推荐
css如何将元素转成块级显示_使用display block改变元素特性
直接设置 display: b…
css使用bootstrap栅格布局不生效怎么办_结合container row col类调整布局
Bootstrap 栅格布局不…
最新动态
CSS伪类:placeholder-shown应用_占位符显示时的交互逻辑
如何使用CSS Grid布局构建项目_项目中使用Grid实现网格布局
CSS Grid 是目前最直接、可控性最强的二维布局方案，适合构建固定结构或响应式网格系统；用 display: grid 就能启动，但关键在如何合理设置 grid-template-columns 和 grid-gap。
CSS颜色属性全解析_整理100个关于颜色的属性与值
CSS 里根本不存在「100个颜色属性」——这是对 CSS 颜色体系的严重误解。真正可用的颜色相关属性只有 color、background-color、border-color、outline-color、fill、stroke 等寥寥几个，其余全是「值」，不是「属性」。
CSS框架Baseguide实战_一个超轻量级的响应式CSS库
它默认不设 max-width，只提供流式栅格基础，不是 Bootstrap 那种开箱即用的“容器”。你得自己加限制才看得出居中效果。
CSS项目实战之FAQ手风琴效果_纯CSS实现内容展开收起
因为默认样式太难看，且老浏览器不支持。Chrome 12+、Firefox 49+、Safari 6.2+ 支持，Edge 79+ 也行；IE 全系不支持。如果你的项目要兼容 IE 或旧安卓 WebView，就得换方案。
CSS轮廓线设置_outline与border的区别及应用
这是最常被误用的根源。当你给一个 div 加上 outline: 2px solid red，它不会影响周围元素的位置；但换成 border: 2px solid red，整个盒模型宽度和高度就多了 4px（上下/左右各 2px），可能触发重排或挤掉邻近元素。
CSS解决Flex布局下高度塌陷_理解弹性容器的高度计算
当父容器设了 display: flex，子元素又全是 flex 项（比如没设 height 或内容为空），浏览器很可能把它算成 0 高度——不是 bug，是规范里明确写的：弹性容器的**自动高度不继承子项的“块级”尺寸逻辑**，它只看自身内容盒（content box）的固有尺寸，而 Flex 子项默认不贡献这个尺寸。
CSS工具库Magic.css实战_独特的CSS3特效动画集成
根本原因是它依赖 transform 和 opacity 的初始值触发 CSS 动画，但很多场景下元素加载时已处于“终态”，浏览器跳过动画。比如用 display: none 切换显示、或 JS 动态插入后立刻加 class。
如何使用 Flexbox 实现图文并排布局（图像居中、文字内容右侧对齐）
本文详解如何通过现代 css flexbox 布局，将图片水平居中显示，并让标题与段落自然排列在其右侧，形成清晰、响应友好的图文混排效果。
CSS响应式设计中的高度自适应_处理内容动态增减后的布局
因为 flex 项默认有 min-height: auto，会阻止子元素的 height: auto 按内容撑开——尤其当父容器设了 display: flex 且没显式控制主轴方向时，子元素高度容易被“锁死”。