您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

您可以在CSS中使用if / else条件吗?

您可以在CSS中使用if / else条件吗?

不是传统意义上的,但如果可以访问HTML,则可以为此使用类。考虑一下:

<p class="normal">Text</p>

<p class="active">Text</p>

并在您的CSS文件中:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

这就是 CSS的 方法

然后是CSS预处理程序,如Sass。您可以在此处使用条件语句,如下所示:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

缺点是,您必须预处理样式表,并且条件是在编译时而不是运行时评估的。

自定义属性 (又称CSS变量)是CSS固有的更新功能。在运行时对它们进行评估(在支持它们的浏览器中)。

有了他们,您可以做一些事情:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

最后,您可以使用自己喜欢的服务器端语言对样式表进行预处理。如果您使用的是PHP,请提供一个style.css.PHP文件,如下所示:

p {
  background-position: <?PHP echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

但是,在这种情况下,由于缓存这样的样式表将很困难,因此会对性能产生影响。

CSS 2022/1/1 18:21:30 有626人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶