CSS也支持if了

当前位置：点晴教程→知识管理交流 →『技术文档交流』

zhenglin

2025年12月4日 8:22 本文热度 106

是的，你没看错，CSS也支持if了！不过，这是一个上相对较新的功能，目前还没有得到广泛的支持。我当前使用的是chrome137版本，相信其它浏览器也会陆续支持。

什么是css if函数

CSS if函数是一种条件语句，它可以根据条件来选择不同的样式。可以更加灵活地编写响应式的CSS样式。

基本语法

property: if(condition: value-if-true; else: value-if-false);

那要怎么用呢

其实最容易想到的的应用场景就是深浅色主题切换了，我们可以根据用户设置来选择不同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      width: 100px;
      height: 20px;
      background-color: if(style(--theme: dark): red; else: blue);
    }
  </style>
</head>
<body>
  <div style="--theme: dark"></div>
  <div style="--theme: light"></div>
</body>
</html>

效果如下：

当然你也可以在一个if函数写多个条件，语法如下：


property: if(
  condition1: value-if-true1; 
  condition2: value-if-true2; 
  else: value-if-false
);

我们可以这样用它

代码高亮：
<style>
  .button {
    color: white;
    padding: 10px 20px;
    display: inline-block;
    background: if(style(--btn-type:primary): #4299e1;
        style(--btn-type: success): #48bb78;
        style(--btn-type: danger): #f56565;
        style(--btn-type: warning): #ed8936;
        else: #2d3748);
  }
</style>

<div class="button" style="--btn-type: primary">Primary</div>
<div class="button" style="--btn-type: success">Success</div>
<div class="button" style="--btn-type: danger">Danger</div>
<div class="button" style="--btn-type: warning">Warning</div>

效果如下：

新特性，功能可能还不够完善，实际应用场景还需要大家去探索。单从上面的例子来看，貌似直接使用传统方式也没有什么问题。

但是使用if函数，可以把逻辑集中，不至于分散在多个不行的class中，或者不同media query中

除了文中提到的style作为条件，其实还支持media,supports这些作为条件，实现更复杂的条件样式

参考文章：原文链接

该文章在 2025/12/4 8:22:58 编辑过

关键字查询

css

支持

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。