我想在CSS中使用条件。
我的想法是，我有一个变量，在运行站点以生成正确的样式表时将其替换。
我想要它，以便根据此变量更改样式表！
看起来像：
[if {var} eq 2 ]
background-position : 150px 8px;
[else]
background-position : 4px 8px;
能做到吗？你怎么做到这一点？
Answers:
不是传统意义上的，但如果可以访问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的方法。
然后是像Sass这样的CSS预处理器。您可以在此处使用条件语句，如下所示：
$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之所以这么烂，原因之一就是它没有条件语法。CSS本身在现代Web堆栈中完全不可用。只需使用SASS一段时间，您就会知道我为什么这么说。SASS具有条件语法...和原始CSS相比，还有许多其他优点。
旧答案（仍然有效）：
一般来说，这不能在CSS中完成！
浏览器的条件如下：
/*[if IE]*/
body {height:100%;}
/*[endif]*/
但是没有人会阻止您使用Javascript来更改DOM或动态分配类，甚至无法使用各自的编程语言来连接样式。
有时我将CSS类作为字符串发送到视图，并将它们回显为类似代码（php）的代码：
<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>令我惊讶的是，没有人提到CSS伪类，它们也是CSS中的一种条件。您可以执行此操作，而无需一行JavaScript。
一些伪类：
例：
div { color: white; background: red }
input:checked + div { background: green }<input type=checkbox>Click me!
<div>Red or green?</div>然而，另一种选择（根据您是否想如果能够动态地评估或不声明）是使用C预处理，如所描述这里。
（是的，旧线程。但是它出现在Google搜索之上，因此其他人也可能对此感兴趣）
我想if / else-logic可以用javascript完成，而javascript可以动态加载/卸载样式表。我还没有跨浏览器等进行过测试，但是应该可以。这将使您开始：
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
您可以为所有条件范围添加容器div。
将条件值作为类添加到容器div中。（您可以通过服务器端编程来设置它-php / asp ...）
<!--container div-->
<div class="true-value">
<!-- your content -->
<p>my content</p>
<p>my content</p>
<p>my content</p>
</div>现在，您可以使用嵌套选择器将容器类用作div中所有元素的全局变量，而无需将类添加到每个元素中。
.true-value p{
background-color:green;
}
.false-value p{
background-color:red;
}您可以通过以下方式为此目的使用javascript：
var myVar = 4;
if(myVar == 5){
document.getElementById("MyElement").className = "active";
}
else{
document.getElementById("MyElement").className = "normal";
}.active{
background-position : 150px 8px;
background-color: black;
}
.normal{
background-position : 4px 8px;
background-color: green;
}
div{
width: 100px;
height: 100px;
}<div id="MyElement">
</div>CSS是一个设计良好的范例，它的许多功能都很少使用。
如果通过条件和变量来表示一种将某些值的更改分布到整个文档中或在某个元素的范围内的机制，则这是这样做的方法：
var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");body.active .menuItem {
background-position : 150px 8px;
background-color: black;
}
body.normal .menuItem {
background-position : 4px 8px;
background-color: green;
}<body>
<div class="menuItem"></div>
</body>这样，您可以在整个CSS样式中分布变量的影响。这类似于@amichai和@SeReGa提出的内容，但是用途更多。
另一个这样的技巧是在整个文档中分配某些活动项的ID，例如再次突出显示菜单时：（使用Freemarker语法）
var chosenCategory = 15;
document.body.className = "category" + chosenCategory;<#list categories as cat >
body.category${cat.id} .menuItem { font-weight: bold; }
</#list><body>
<div class="menuItem"></div>
</body>当然，这仅适用于有限的一组商品（例如类别或州），而不是无限的商品（如电子商店商品），否则生成的CSS太大。但是在生成静态脱机文档时特别方便。
与生成平台结合使用CSS做“条件”的另一种技巧是：
.myList {
/* Default list formatting */
}
.myList.count0 {
/* Hide the list when there is no item. */
display: none;
}
.myList.count1 {
/* Special treatment if there is just 1 item */
color: gray;
}<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>如果您愿意使用jquery，则可以在html中使用javascript设置条件语句：
$('.class').css("color",((Variable > 0) ? "#009933":"#000"));.class如果Variable的值大于，这会将文字颜色更改为绿色0。