你可以在CSS中使用if / else条件吗？
我想在我的CSS中使用条件。
这个想法是，我有一个variables，当网站运行生成正确的样式表时，我将replace。
我想这样，根据这个variables样式表变化！
看起来像：
[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的方式来做到这一点。
然后有像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本身的一个新特性是自定义属性 （又名CSSvariables）。 它们在运行时进行评估（在支持它们的浏览器中）。
有了他们，你可以做一些事情：
: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; }
在这种情况下，你会受到性能的影响，因为caching这样的样式表将会很困难。
下面是我的旧的答案仍然有效，但我今天有一个更加自以为是的方法：
CSS糟糕的原因之一就是它没有条件语法。 现在的web堆栈中CSS本身是完全无法使用的。 使用SASS一会儿，你就会知道我为什么这么说。 SASS有条件语法…和原始CSS也有很多优点。
旧的答案（仍然有效）：
一般不能用CSS做！
你有这样的浏览器条件：
/*[if IE]*/ body {height:100%;} /*[endif]*/
但是，没有人让你使用Javascript来改变DOM或dynamic分配类，甚至连接各自编程语言中的样式。
我有时把CSS类作为string发送到视图，并将它们回显到代码中（php）：
<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>
您可以创build两个独立的样式表，并根据比较结果包含其中的一个样式表
在其中一个你可以放
background-position : 150px 8px;
在另一个
background-position : 4px 8px;
我认为，您可以在CSS中执行的唯一检查是浏览器识别：
条件CSS
将服务器设置为将css文件parsing为PHP，然后使用简单的PHP语句定义variablesvariables。
当然，这假定你正在使用PHP …
据我所知，在CSS中没有if / then / else。 或者，您可以使用javascript函数来更改元素的background-position属性。
另一个选项（根据你是否希望if语句被dynamic评估）是使用C预处理器，如下所述。
（是的，旧的线程，但它在谷歌search之上，所以其他人可能也有兴趣）
我猜if / else逻辑可以用javascript来完成，而这又可以dynamic地加载/卸载样式表。 我还没有testing过浏览器等，但它应该工作。 这会让你开始：
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
这是一个额外的信息，上面的Boldewyn答案。
添加一些php代码来做if / else
if($x==1){ print "<p class=\"normal\">Text</p>\n"; } else { print "<p class=\"active\">Text</p>\n"; }
您可以为所有条件范围添加容器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>
现在，您可以使用嵌套select器将容器类用作div中所有元素的全局variables，而无需将类添加到每个元素。
.true-value p{ backgrounf-color:green; } .false-value p{ backgrounf-color:red; }
你可以使用而不是如果喜欢
.Container *:not(a) { color: #fff; }
如果你打算使用jQuery，你可以在html中使用javascript设置条件语句：
$('.class').css("color",((Variable > 0) ? "#009933":"#000"));
如果Variable的值大于0则会将.class的文本颜色更改为绿色。
你可以使用JavaScript来达到这个目的，这样做：
- 首先你为“普通”类和“活动”类设置CSS
- 那么你给你的元素ID “MyElement”
- 现在你在JavaScript中创build条件，就像下面的例子一样（你可以运行它，将myVar的值改为5，你会看到它是如何工作的）
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是一个很好的devise范例，其中许多function并没有太多的用处。
如果通过一个条件和variables，你的意思是一个机制来分配一些价值的改变整个文件，或在一些元素的范围内，那么这是如何做到这一点：
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>
