• 首页
  • 社区
  • 圈子
  • 资讯
  • 成就
  • 勋章
  • 寻宝
  • 游戏
    • 立即注册

    2026现代CSS实战：14个神级技巧，代码直接少写70%

    15 1
    7 小时前 发表在 网站相关| 查看全部 阅读模式
    01 :is() —— 选择器合并神器，冗余直接砍半

    把重复前缀一组合，代码瞬间清爽。

    1. /* 旧写法 */
    2. header p, main p, footer p { line-height:1.6; }

    4. /* 新写法 */
    5. :is(header, main, footer) p { line-height:1.6; }
    复制代码

    多层嵌套也能叠：

    1. :is(header, footer) a:is(:hover, :focus) { color:[color=#576b95 !important][url=]#2563eb[/url]; }
    复制代码

    02 :where() —— 零权重福音，组件样式随便覆

    功能和:is()一模一样，但特异性=0，写基础样式、组件默认样式神器。

    1. /* 权重高，难覆盖 */
    2. article :is(h2,h3) { color:[color=#576b95 !important][url=]#222[/url]; }

    4. /* 权重0，轻松覆盖 */
    5. article :where(h2,h3) { color:[color=#576B95 !important][url=]#222[/url]; }
    复制代码
    适用场景：UI库、全局重置、基础排版。

    03 :has() —— 父选择器降临，干掉80%冗余JS

    终于能根据子元素/兄弟关系选父级，逻辑直接写进CSS。

    1. /* 包含图片的卡片 */
    2. .card:has(img) { padding-top:0; border-radius:12px 12px 0 0; }

    4. /* 表单校验失败 */
    5. .form-group:has(input:invalid) { border-color:[color=#576B95 !important][url=]#ef4444[/url]; }

    7. /* 有下拉菜单的导航项 */
    8. nav li:has(ul) > a::after { content:"▼"; margin-left:6px; }
    复制代码
    真正的“CSS-if逻辑”，现代浏览器全支持。

    04 容器查询 —— 组件级响应式，告别视口绑架

    比媒体查询强10倍：组件看容器宽度，不是看屏幕。

    1. /* 定义容器 */
    2. .sidebar { container-type:inline-size; }

    4. /* 容器够宽就变横版 */
    5. @container (min-width:380px) {
    6.   .card { display:flex; gap:16px; }
    7. }
    复制代码
    一套组件，适配侧边栏、弹窗、主内容区。

    05 @layer 层叠规则 —— 终结权重战争

    用“层优先级”代替权重内卷，结构清晰到离谱。

    1. @layer reset, base, components, utilities;

    3. @layer base {
    4.   body { line-height:1.5; }
    5. }
    6. @layer components {
    7.   .btn { padding:8px 16px; }
    8. }
    复制代码
    层越靠后优先级越高，再也不用!important。

    06 :not() 多条件排除 —— 精准过滤，一行顶三行

    新版支持多选择器并列，不用重复写:not()+:not()。

    1. /* 排除三类元素 */
    2. div:not(.draft, .hidden, [data-loading="true"]) {
    3.   background:[color=#576B95 !important][url=]#fff[/url];
    4. }
    复制代码

    07 nth-child 高级公式 —— 批量排版不用加class

    不用JS、不用循环，纯CSS控制间距、高亮。

    1. /* 第4个及以后 */
    2. li:nth-child(n+4) { margin-top:12px; }

    4. /* 前5个加粗 */
    5. li:nth-child(-n+5) { font-weight:600; }

    7. /* 奇偶行 */
    8. tr:nth-child(even) { background:[color=#576B95 !important][url=]#f9fafb[/url]; }
    复制代码

    08 属性选择器通配符 —— 自动识别链接/文件/状态

    像正则一样匹配，自动给链接加图标、标状态。

    1. /* PDF链接 */
    2. a[href$=".pdf"]::after { content:" 📄"; }

    4. /* 外部链接 */
    5. a[href^="http"]:not([href*="你的域名"])::after { content:" 🔗"; }

    7. /* 数据状态 */
    8. .card[data-status="error"] { border-color:[color=#576B95 !important][url=]#ef4444[/url]; }
    复制代码

    09 :focus-visible —— 优雅焦点，不丑且可访问

    只在键盘导航时显示轮廓，鼠标点击不干扰。

    1. button:focus-visible {
    2.   outline:2px solid [color=#576B95 !important][url=]#2563eb[/url];
    3.   outline-offset:2px;
    4. }
    复制代码

    10 :empty —— 空元素自动隐藏，布局不崩

    没有文字、没有子元素，直接隐藏，不用JS判断。

    1. section:empty, div:empty { display:none; }
    复制代码

    11 相邻兄弟组合 —— 自动间距、排版逻辑

    不用给每个元素加class，靠关系自动排版。

    1. /* 列表项之间自动间距 */
    2. li + li { margin-top:8px; }

    4. /* 标题后所有段落缩进 */
    5. h2 ~ p { padding-left:1em; }
    复制代码

    12 color-mix() —— 原生混色，告别SASS变量

    CSS自带颜色混合，主题色、渐变、透明度一键生成。

    1. .btn {
    2.   background:color-mix(in srgb, #2563eb 80%, white 20%);
    3. }
    复制代码

    13 accent-color —— 表单原生着色，一行统一风格

    单选、复选、滑块一键换色，不用覆盖伪元素。

    1. input[type="checkbox"],
    2. input[type="radio"] {
    3.   accent-color:[color=#576B95 !important][url=]#2563eb[/url];
    4. }
    复制代码

    14 subgrid —— 嵌套网格对齐，强迫症狂喜

    子网格直接继承父网格轨道，卡片高度、标题完美对齐。

    1. .container {
    2.   display:grid;
    3.   grid-template-columns:repeat(3,1fr);
    4. }
    5. .card {
    6.   display:grid;
    7.   grid-template-rows:subgrid;
    8.   grid-row:span 3;
    9. }
    复制代码

    2026前端必背：4组黄金组合
    • 复杂选择器：:is() + :where() 精简代码
    • 关系判断：:has() 替代大量JS逻辑
    • 响应式：容器查询 + 媒体查询 双剑合璧
    • 工程化：@layer 管理优先级，告别权重地狱
    最后

    现代CSS早已不是“写样式”，而是用声明式逻辑控制UI。 这14个技巧，能让你：

    • 代码量减少60%–70%
    • 维护成本直线下降
    • 页面更流畅、扩展性更强

    建议立刻收藏，下次写CSS直接照着抄。


    生命在于折腾，牛马点缀生活。
    回复 转播

    举报

    全部评论1

    九三郎 vip vip-forever
    沙发 1 小时前 | 查看全部
    沙发。
    来吧来吧，来唱歌吧。
    回复
    ♡0

    举报

    回复
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    hot.热文换一批
    1. 🎉庆祝应用中心上架15个插件了，抽波优惠券！[开奖时间：2026-04-26 20:00]
    2. 分享两个文字广告位代码
    3. 抽个域名，今天刚续费 - 3BBS.CN
    4. 主题存钱罐上线啦，测试一下吧！
    5. 任务成就插件即将迎来史诗级更新！
    6. 保护古法编程，守护非遗手工代码
    7. 分享一个本站在用的帖内用户信息美化代码
    8. 又一款新插件上线啦！欢迎体验！
    9. 我突然发现我整了一个很牛逼的华为花瓣邮邮箱前缀。。。
    10. 就+5？
    11. 有没有感觉到论坛速度提升了？
    12. 走过职场的人告诉你：职场很复杂，但你还得努力
    13. 论坛签到功能迁移说明
    14. 中奖5000万，领奖流程（超详细，可留存备用）
    15. Discuz！X3.5版本于2026 年 5 月 4 日正式终止更新！
    16. 震惊！全红婵被人拉群骂，282人大群浮出水面，定规矩只黑她一个
    17. 论坛新上小游戏【孔明棋】欢迎体验！
    18. 🌱牛马论坛-每日早报-2026年03月31日
    19. [帖子寻宝彩蛋]这应该是目前最高的奖励了吧！
    20. 这才是牛马需要的下载速度~
    21. 论坛成就系统已上线，欢迎体验！
    22. 即日起，论坛停止采集！
    23. 有朋友反应论坛被劫持了，请各位牛马帮忙测试一下！
    24. 到商丘下属某县办事，这县城现状实在是。。。
    上一主题     下一主题
    最新热评 加载中...
    琥珀彩蛋
    琥珀彩蛋
    当前页面有彩蛋，请仔细寻找哦！
    牛马论坛（niumabbs.com），一个专注于分享日常新鲜事、职场工作点滴、摸鱼乐趣与各类生活感悟的交流平台。

    快捷访问

    我的帖子 我的收藏 我的好友 我的关注

    附加功能

    任务大厅 道具商店 勋章中心 随便看看

    关于我们

    举报 小黑屋 手机版 站点统计

      关注我们

    • 加入Q群
    • 微信客服
    • QQ客服
    Copyright © 2026 NIUMABBS 版权所有 All Rights Reserved. 劰载中...
    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表