不是传统意义上的,但如果可以访问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;
}