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

我想在CSS中使用条件。

我的想法是,当站点运行以生成正确的样式表时,我将替换一个变量。

我想要它,以便根据此变量更改样式表!

看起来像:

[if {var} eq 2 ]

background-position : 150px 8px;

[else]

background-position : 4px 8px;

能做到吗?你怎么做到这一点?

回答:

不是传统意义上的,但如果可以访问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中使用if / else条件吗? 的全部内容, 来源链接: utcz.com/qa/425380.html

回到顶部