伪元素

响应式表格可通过三种方法优化移动端阅读：一是添加overflow-x: auto实现横向滚动；二是使用媒体查询和data-label将行转为卡片式堆叠；三是隐藏次要列简化显示。 响应式表格在移动设备上常因列太多而难以阅读。通过一些巧妙的 CSS 技巧，可以让表格在小屏幕上依然清晰可用。核心思路是：在…

clearfix是一种通过伪元素闭合浮动的技术，使用.clearfix::after添加隐藏元素并设置clear:both，使父容器正确包裹浮动子元素，解决高度塌陷问题。 当子元素设置了浮动（float）后，父元素无法自动撑开包含它们，导致布局错乱。使用CSS的clearfix方法可以有效解决这个问…

清除浮动的方法有四种：1. 使用clear属性添加空元素，简单但不语义化；2. 伪元素::after插入内容并清除浮动，推荐且HTML简洁；3. overflow:hidden或auto触发BFC包含浮动，但可能裁剪溢出内容；4. display:flow-root创建BFC，现代浏览器首选。推荐优…

解决父元素高度塌陷的关键是清除浮动，常用方法包括伪元素clearfix、overflow: hidden、display: flow-root等，推荐使用display: flow-root或::after伪元素清除法，确保父容器正确包裹浮动子元素，避免布局错位。 处理嵌套浮动元素的关键是解决父元素…

必须设置content属性才能生效，::before和::after用于在元素前后插入装饰性内容，如引号、图标、分隔符等，不影响文档结构仅用于视觉效果，可结合样式实现复杂设计。 CSS 的 ::before 和 ::after 伪元素用于在元素的内容之前或之后插入装饰性内容，通常配合 content…

使用clear属性或触发BFC可清除浮动影响。推荐伪元素方案：.container::after {content:””;display:block;clear:both;}配合zoom:1兼容IE，或直接使用display:flow-root创建BFC，避免高度塌陷，现代浏…

通过::selection伪元素可自定义网页选中文本的样式，如颜色和背景色，基本语法为::selection { color: #fff; background-color: #000; }，仅支持color、background-color、cursor及部分浏览器支持的outline和text-…

合理使用rgba()和opacity可实现丰富视觉层次。rgba()精准控制颜色透明度，避免影响子元素，适合背景叠加与色彩融合；opacity作用于整个元素，常用于淡入淡出、遮罩效果。多层半透明叠加产生自然混合，如红色蒙版营造氛围，伪元素增强质感。注意文本用rgba()而非opacity保持可读性，…

使用 ::backdrop 伪元素可为 模态框添加半透明或模糊背景，提升视觉层次与用户体验，支持现代浏览器，可通过 CSS 自定义样式、动画及 backdrop-filter 实现淡入淡出与毛玻璃效果。 在弹窗模态中使用 ::backdrop 伪元素，可以为模态框背后的内容添加视觉遮罩效果，比如半透…

合理使用 :optional 和 :required 伪类可直观区分表单必填与选填项。1. 通过不同边框颜色（如红色表示必填，灰色表示可选）实现视觉区分；2. 利用 label:has(input:required)::after 添加红色星号提示，避免HTML冗余；3. 聚焦时通过 outline…