大家好，我是 **前端架构师 - 大卫**。更多优质内容请关注微信公众号 @**程序员大卫**。 > **初心为助前端人🚀，进阶路上共星辰✨，** > > **您的点赞👍与关注❤️，是我笔耕不辍的灯💡。** ## 背景在学习 CSS 时，你可能会忽略一些鲜为人知但实用的功能。下面介绍几个 CSS 小技巧，从背景聚焦效果到宽高比控制，让你的页面设计更灵活、更具视觉冲击力！ ## 一、焦点感知父元素（:focus-within ）—— 让整个表单区块"活"起来 **功能介绍：** 当一个表单输入框获得焦点时，使用 `:focus-within` 可以让包含这个输入框的父元素也发生样式变化（例如改变背景色），以便用户更直观地知道当前正在操作哪个区域。 **示例代码：** ```html ``` ![CSS 小技巧.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/53c356fff75b40de9a93899e1a14c530~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2r:q75.awebp?rk3s=f64ab15b&x-expires=1760937634&x-signature=Gr%2Fla%2FvfbRR9YkkcFXmQfpvz3q8%3D) ## 二、智能必填星号（:has 选择器）—— 自动识别必填字段 **功能介绍：** 在表单中，为必填项的标签后自动添加红色星号，可以用 CSS 的 `:has` 伪类实现。这样做可以减少手动添加星号的繁琐工作。 **示例代码：** ```css /* 对于紧接着带有 data-required 属性的 input，自动在 span 后添加 "*" */ .form-block span:has(+ input[data-required])::after { content: "*"; color: red; } ``` ![必填标记示例](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b8723b34fb8f45878dddd86317b8773f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2r:q75.awebp?rk3s=f64ab15b&x-expires=1760937634&x-signature=8TP%2BEFwLf%2Bi2h0K5JwqRzXKCaT0%3D) ## 三、杂志风首字母下沉（::first-letter）—— 打造高级排版 **功能介绍：** 通过 `::first-letter` 伪元素，可以为文章的首字母设置特殊样式（如增大、上浮等），实现杂志排版中常见的首字母下沉效果，让排版更有设计感。 **示例代码：** ```html

She lit the third match and an even more wonderful thing happened. There stood a Christmas tree hung with hundreds of candles, glittering with tinsel and colored balls. "Oh, how lovely!" exclaimed the little match seller, holding up the match. Then, the match burned her finger and flickered out.

``` ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6967e500bf7147b298e4ec9dfd532509~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2r:q75.awebp?rk3s=f64ab15b&x-expires=1760937634&x-signature=1eTGh97OT86Hi3%2B4zEEl9EXEkyY%3D) ## 四、智能宽度调节（fit-content）—— 告别生硬的固定宽度 **功能介绍：** `fit-content` 属性可以使一个块级元素在保持块元素特性的同时，根据内容自适应宽度，避免宽度浪费空间。 **示例代码：** ```html

Text have fit-content.

Text don't have fit-content.

``` ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ce0edc1b3ae54f00823b37eb1f3fc0ab~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2r:q75.awebp?rk3s=f64ab15b&x-expires=1760937634&x-signature=btDyQOvnTK52WhtpCJzploepgoo%3D) ## 五、动态计算高度（calc）—— 精准控制元素尺寸 **功能介绍：** 利用 `calc()` 函数，可以在 CSS 中动态计算长度值。例如，在一个容器中，将剩余高度自动分配给某个元素，避免手动计算。 **示例代码：** ```html

``` ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/eb9a539269894e31ae63725d5c356423~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2r:q75.awebp?rk3s=f64ab15b&x-expires=1760937634&x-signature=SsI7mG2Z%2B4DcXjGJXxEWTcJVV48%3D) ## 六、宽高比锁定（aspect-ratio）—— 响应式布局神器 **功能介绍：** `aspect-ratio` 属性允许你轻松控制元素的宽高比，而不需要额外的 JavaScript 或繁琐的 CSS 调整。比如，可以让一个元素的宽度是高度的一半。 **示例代码：** ```html

``` ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0826f456e9f8487fad1e67a4de977e4c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2r:q75.awebp?rk3s=f64ab15b&x-expires=1760937634&x-signature=wU7v2jUcjUmPhMNlZ56SD6RhsLI%3D) ## 最后如果觉得本文对你有帮助，欢迎点赞👍、关注➕、收藏❤️，也欢迎在评论区交流你的看法！