你可以在CSS中使用if/else条件吗？

89

不是传统意义上的，但你可以使用类此，如果你有访问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预处理器。您可以使用conditionals那里，which'd是这样的：

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

缺点是，那你一定会预先处理您的样式表，并且该条件是在编译时进行评估，而不是运行时间。

CSS的一个新特点是正确custom properties（又名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; 
}

在这种情况下，你会然而对性能有影响，因为缓存这些样式表将是困难的。

来源

2009-07-15 06:28:15 Boldewyn

3

就我所知，在CSS中没有if/then/else。或者，您可以使用javascript函数来更改元素的background-position属性。

来源

2009-07-15 06:24:14

5

设置服务器以将css文件解析为PHP，然后使用简单的PHP语句定义变量变量。

当然，这个假设您使用的PHP ...

来源

2009-07-15 06:26:39 beggs

+1

您可以将“PHP”替换为“您选择的编程语言或模板语言” – Quentin 2009-07-15 06:50:45

+1

问题是，如果您的CSS为50kb，并且您只更改了几个值，那么静态和缓存更好吗？ – alex 2009-07-15 07:04:30

+2

是的，但你可以提取需要动态的部分，并通过@import url（'dynamic.css.php'）重新包含它们。 – Boldewyn 2009-07-15 07:48:43

14

下面是我的老回答这仍然是有效的，但我有一个比较自以为是的做法今天：

其中一个原因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>

来源

2009-07-15 06:26:59 markus

8

您可以创建两个单独的样式表和包括基于比较结果

在的一个其中一人就可以把

background-position : 150px 8px;

在另外一个

background-position : 4px 8px;

我认为您可以在CSS中执行的唯一检查是浏览器识别：

Conditional-CSS

来源

2009-07-15 06:33:23 RaYell

3

这是一个额外的信息给上面的Boldewyn答案。

添加一些PHP代码做的if/else

if($x==1){ 
    print "<p class=\"normal\">Text</p>\n"; 
} else { 
    print "<p class=\"active\">Text</p>\n"; 
}

来源

2009-07-15 06:56:28 Johan

3

另一个选择（根据您是否想使if语句进行动态评估与否）是使用C预处理，如所描述here 。

来源

2009-07-15 08:33:03

3

（是的，古老的线程，但它在谷歌搜索的顶部打开了，这样其他人可能有兴趣以及）

我猜的if/else逻辑可以使用JavaScript，来完成这反过来可以动态地加载/卸载样式表。我没有通过浏览器等进行测试，但它应该工作。这将让你开始：

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

来源

2010-02-25 09:02:25 josteinaj

4

可以使用不代替，如果像

.Container *:not(a) 
{ 
    color: #fff; 
}

来源

2014-06-24 23:37:04 Kurkula

3

您可以添加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{ 
    backgrounf-color:green; 
} 
.false-value p{ 
    backgrounf-color:red; 
}

来源

2015-03-03 14:49:40 amichai

1

如果你打开使用jQuery，您可以使用HTML中的JavaScript设置条件语句：

$('.class').css("color",((Variable > 0) ? "#009933":"#000"));

这会的.class文本颜色变为绿色，如果变量的值是大于0。

来源

2016-05-12 17:23:05

1

您可以使用JavaScript用于此目的，这种方式：

首先你设置的CSS为“正常”类和“活动”类
然后你给你的元素ID“MyElement”
，现在您在JavaScript中，像下面的例子...（你可以运行它，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>

来源

2016-09-19 07:51:58 SeReGa

0

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>

来源

2017-10-02 04:05:48

-1

您可以结合使用calc()与var()排序模拟条件句：

:root { 
--var-eq-two: 0; 
} 

.var-eq-two { 
    --var-eq-two: 1; 
} 

.block { 
    background-position: calc(
     150px * var(--var-eq-two) + 
     4px * (1 - var(--var-eq-two)) 
    ) 8px; 
}

concept

来源

2017-12-20 16:08:45 yeedle

你可以在CSS中使用if/else条件吗？

回答

相关问题