29 条 CSS 高级技巧清单（Modern CSS）

中英文泡椒

1. 使用 CSS Reset

使用 normalize.css 或简单的重置规则来抹平不同浏览器之间的默认样式差异。

2. 继承 box-sizing

从 html 继承 box-sizing: border-box，这样在修改第三方组件样式时会更方便。

1. html { box-sizing: border-box; }
   
2. *, *::before, *::after { box-sizing: inherit; }

复制代码

3. 使用 unset 替代重置所有属性

当你想重置一个元素的所有样式时，不必列出每个属性，使用 all: unset 即可。

4. 使用 :not() 简化列表边框

不再需要为最后一个元素单独写 border-bottom: none。

1. .nav li:not(:last-child) { border-bottom: 1px solid #ccc; }

复制代码

5. 检查本地字体是否已安装

在 src 中优先使用 local()，避免下载已有的字体。

1. @font-face {
   
2.   font-family: 'MyFont';
   
3.   src: local('MyFont'), url('myfont.woff2')  format('woff2');
   
4. }

复制代码

6. 为 body 添加 line-height

不要给每个 p 或 h1 单独加行高，直接在 body 上统一设置，增强可读性。

7. 垂直居中一切 (Flexbox)

利用 Flexbox 简单的两行代码即可实现水平垂直居中。

1. .container { display: flex; align-items: center; justify-content: center; }

复制代码

8. 逗号分隔列表

使用伪类为列表项动态添加逗号，且最后一个项不显示。

1. ul li:not(:last-child)::after { content: ","; }

复制代码

9. 使用负值 nth-child 选择元素

如果你想选择前 n 个元素（例如前 3 个）：

1. li:nth-child(-n+3) { color: red; }

复制代码

10. 使用 SVG 图标

SVG 在任何分辨率下都保持清晰，且文件体积小，易于通过 CSS 控制（如 fill 颜色）。

11. “空洞的猫头鹰”选择器 (* + *)

为所有跟随在另一个元素后面的元素添加边距，非常适合控制内容间距。

1. .content * + * { margin-top: 1.5em; }

复制代码

12. 使用 max-height 实现纯 CSS 手风琴

利用 max-height 和 transition 实现平滑的折叠效果（比 display: none 更好）。

13. 使表格单元格等宽

使用 table-layout: fixed 让表格列宽平均分配。

1. table { table-layout: fixed; }

复制代码

14. 使用属性选择器处理空链接

为没有 href 或 href 为空的 <a> 标签添加特殊样式。

1. a[href^="javascript:"]:after, a[href^="#"]:after { content: " (empty link)"; }

复制代码

15. 样式化“默认”链接

使用 :any-link 伪类快速设置所有未访问和已访问链接的样式。

16. 保持图像比例 (Intrinsic Ratio)

使用 aspect-ratio 属性（现代浏览器）或传统的百分比 padding 技巧。

1. img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }

复制代码

17. 样式化损坏的图像

利用伪元素在图片加载失败（显示破裂图标）时提供更优雅的反馈。

1. img:before { content: "We're sorry, the image is broken"; display: block; }

复制代码

18. 使用 rem 设置字号，em 设置间距

rem 保证了全局一致性，而 em 让间距相对于字体大小缩放。

19. 自动播放静音视频

在移动端，视频必须设置 muted 属性才能触发 autoplay。

20. 使用 :root 实现响应式字体

利用 CSS 变量和 calc 在 :root 下定义字体，随屏幕宽度平滑变化。

1. :root { font-size: calc(1vw + 1vh + 0.5vmin); }

复制代码

21. 样式化 <input type="range">

通过 ::webkit-slider-runnable-track 等伪元素来自定义滑动条样式。

22. 统一表单控件样式

使用 appearance: none 移除系统默认样式，从而实现完全自定义的按钮和输入框。

23. 避免使用 !important

尽量通过提高选择器权重（Specificity）来覆盖样式，而不是滥用 !important。

24. 使用 object-fit

让图片像背景图一样填充容器，而不被拉伸变形。

1. img { width: 200px; height: 200px; object-fit: cover; }

复制代码

25. 使用 pointer-events: none 禁用点击

可以穿透覆盖层点击到底部的元素，或暂时禁用按钮点击。

26. 禁用文本选择

在 UI 按钮或图标上使用 user-select: none，防止用户误选中文字。

27. 使用 scroll-behavior: smooth

无需 JavaScript，只需一行 CSS 即可实现锚点跳转时的平滑滚动。

1. html { scroll-behavior: smooth; }

复制代码

28. 使用 CSS 变量

减少重复代码，方便实现主题切换（如深色模式）。

1. :root { --main-color: #ff0000; }
   
2. .button { color: var(--main-color); }

复制代码

29. 使用 :where() 和 :is()

使用 :is() 简化复杂的选择器，使用 :where() 降低选择器权重。

1. /* 简化 */
   
2. :is(h1, h2, h3) { margin-bottom: 1rem; }

复制代码

BrendanEich

鱼油你好！  
这份 29 条 CSS 高级技巧清单 非常实用，几乎覆盖了日常开发中最容易踩坑和提效的场景。下面我帮你划一下重点，并补充一点使用注意。

• 基础统一：第 1、2、3 条是“地基”，建议一开始就配好，尤其是 box-sizing: border-box。
• 选择器进阶：第 4、8、9、11、14、15、29 条能大大简化代码，推荐掌握 :is() 和 :where() 的权重差异。
• 布局与尺寸：第 7、12、13、16、24 条是高频需求，Flexbox 居中、aspect-ratio 和 object-fit 一定要熟练。
• 字体与响应式：第 5、6、18、20 条，记住“字号用 rem，间距用 em”这个黄金法则。
• 交互与体验：第 25、26、27 条，一行 CSS 就能提升体验，特别是 scroll-behavior: smooth。
  

一些补充提醒：

• 第 10 条 SVG 图标 强烈建议使用，配合 fill 变量可以轻松实现多主题。
• 第 17 条“样式化损坏图片”在部分浏览器中可能不生效，因为 img 是替换元素，伪元素支持有限。建议使用 onerror 或 alt 文本兜底。
• 第 20 条的 calc(1vw + 1vh + 0.5vmin) 很有趣，但注意在超宽屏或小屏上要配合 clamp() 防止字号过大或过小。
• 第 22 条的 appearance: none 虽然能重置表单样式，但某些浏览器（如 Firefox）对 select 的下拉箭头处理不同，需要额外加背景图。
• 第 23 条“避免 !important” 是重点中的重点，平时写 CSS 就应该用“低权重 + 合理嵌套”来管理样式，而不是靠后期硬覆盖。
  

最后建议：  
把这 29 条当成一份“自查清单”，每写完一个页面就对照一遍，养成习惯后你的 CSS 代码质量和效率都会明显提升。如果对其中某一条有疑问，欢迎随时发帖讨论！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。