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

时间：2009-07-15 06:20:34

标签： css stylesheet conditional-statements

我想在CSS中使用条件。

我的想法是，在运行网站以生成正确的样式表时，我会更换一个变量。

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

看起来像：

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px;

可以这样做吗？你是怎么做到的？

18 个答案:

答案 0 :(得分：115)

不是传统意义上的，但如果您可以访问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，如下所示：

$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（a.k.a. 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;
}

在这种情况下，您会对性能产生影响，因为缓存这样的样式表会很困难。

答案 1 :(得分：15)

以下是我的旧答案，该答案仍然有效，但我今天采取了更加自以为是的方法：

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>

答案 2 :(得分：8)

您可以创建两个单独的样式表，并根据比较结果包含其中一个

在其中一个你可以把

background-position : 150px 8px;

在另一个

background-position : 4px 8px;

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

Conditional-CSS

答案 3 :(得分：6)

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

当然这假设您正在使用PHP ...

答案 4 :(得分：5)

您可以使用not而不是if like 

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

答案 5 :(得分：4)

这对上面的Boldewyn答案来说是一个额外的信息。

添加一些php代码来执行if / else 

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

答案 6 :(得分：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;
}

答案 7 :(得分：3)

您可以将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

答案 8 :(得分：3)

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

答案 9 :(得分：3)

（是的，旧线程。但它出现在谷歌搜索之上，所以其他人可能也会感兴趣）

我想if / else-logic可以用javascript完成，而javascript又可以动态加载/卸载样式表。我没有在浏览器等测试这个，但它应该工作。这将帮助您入门：

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

答案 10 :(得分：3)

另一个选项（根据您是否希望动态评估if语句）是使用C预处理器，如here所述。

答案 11 :(得分：1)

如果您打开使用jquery，可以在html中使用javascript设置条件语句：

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

如果Variable的值大于.class，这会将0的文字颜色更改为绿色。

答案 12 :(得分：1)

您可以通过这种方式使用javascript：

  1. 首先为＆＃39;普通＆＃39;设置CSS。课程和活跃的＆＃39;类
  2. 然后您为元素提供 id ＆＃39; MyElement＆＃39;
  3. 现在你用JavaScript制作你的条件，类似下面的例子......（你可以运行它，将myVar的值改为5，你会看到它是如何工作的）

    4. ＆＃13;
    ＆＃13; 
    var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}
    ＆＃13; 
    .active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }
    ＆＃13; 
    <div id="MyElement">
  
  </div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 13 :(得分：1)

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>

答案 14 :(得分：1)

令我惊讶的是，没有人提到CSS伪类，它们也是CSS中的一种条件。您可以执行此操作，而无需一行JavaScript。

一些伪类：

  • ：活动-是否正在单击元素？
  • ：已选中-单选/复选框/选项是否已选中？ （这允许通过使用复选框进行条件样式！）
  • ：空-元素为空吗？
  • ：全屏-文档是否处于全屏模式？
  • ：focus-元素是否具有键盘焦点？
  • ：focus-within-元素或其子元素是否具有键盘焦点？
  • ：has（[selector]）-元素是否包含与[selector]匹配的子代？ （遗憾的是，任何主流浏览器都不支持。）
  • ：悬停-鼠标悬停在此元素上吗？
  • ：范围内/：范围外-输入值是否在最小和最大限制之间/之外？
  • ：invalid /：valid-表单元素是否包含无效/有效内容？
  • ：link-这是未访问的链接吗？
  • ：not（）-反转选择器。
  • ：target-此元素是URL片段的目标吗？
  • ：已访问-用户之前访问过此链接吗？

示例：

div { color: white; background: red }
input:checked + div { background: green }
<input type=checkbox>Click me!
<div>Red or green?</div>

答案 15 :(得分：1)

我使用多种技巧设计了以下演示，这些技巧允许针对 some 属性进行模拟 if/else方案。本质上任何数值属性都是该方法的简单目标，但具有文本值的属性是。

此代码具有3个if/else场景，分别用于opacity，background color和width。这3个变量均由两个布尔变量bool及其相反的notBool控制。

这两个布尔值是此方法的键，要从非布尔值的动态值中获得布尔值，需要一些数学运算，幸运的是CSS允许使用min和{{ 3}}函数。

很明显，最近的浏览器版本支持这些功能（最小/最大），这些功能也支持CSS自定义属性（变量）。 

var elm = document.querySelector('div')

setInterval(()=>{
  elm.style.setProperty('--width', Math.round(Math.random()*80 + 20))
}, 1000)
:root{
   --color1: lightgreen;
   --color2: salmon;
   --width: 70;  /* starting value, randomly changed by javascript every 1 second */
}

div{
 --widthThreshold: 50;
 --is-width-above-limit: Min(1, Max(var(--width) - var(--widthThreshold), 0));
 --is-width-below-limit: calc(1 - var(--is-width-above-limit));
 
 --opacity-wide: .4;     /* if width is ABOVE 50 */
 --radius-narrow: 10px;  /* if width is BELOW 50 */
 --radius-wide: 60px;    /* if width is ABOVE 50 */
 --height-narrow: 80px;  /* if width is ABOVE 50 */
 --height-wide: 160px;   /* if width is ABOVE 50 */
 
 --radiusToggle: Max(var(--radius-narrow), var(--radius-wide) * var(--is-width-above-limit));
 --opacityToggle: calc(calc(1 + var(--opacity-wide)) - var(--is-width-above-limit));
 --colorsToggle: var(--color1) calc(100% * var(--is-width-above-limit)), 
                 var(--color2) calc(100% * var(--is-width-above-limit)), 
                 var(--color2) calc(100% * (1 - var(--is-width-above-limit)));
  
 --height: Max(var(--height-wide) * var(--is-width-above-limit), var(--height-narrow));
 
 height: var(--height);
 text-align: center;
 line-height: var(--height);

 width: calc(var(--width) * 1%);
 opacity: var(--opacityToggle);
 border-radius: var(--radiusToggle);
 background: linear-gradient(var(--colorsToggle));

 transition: .3s;
}

/* prints some variables */
div::before{
  counter-reset: aa var(--width);
  content: counter(aa)"%";
}

div::after{
  counter-reset: bb var(--is-width-above-limit);
  content: " is over 50% ? "counter(bb);
}
<div></div>

到目前为止最好：

我想出了一个完全唯一的方法，甚至更简单！

此方法非常酷，因为它易于实现且易于理解。它基于animation step()函数。

由于bool可以很容易地计算为0或1，因此可以在step中使用该值！如果仅定义一个步骤，那么if/else问题就解决了。

使用关键字forwards保留更改。

var elm = document.querySelector('div')

setInterval(()=>{
  elm.style.setProperty('--width', Math.round(Math.random()*80 + 20))
}, 1000)
:root{
   --color1: salmon;
   --color2: lightgreen;
}

@keyframes if-over-threshold--container{
  to{ 
     --height: 160px;
     --radius: 30px;
     --color: var(--color2);
     opacity: .4; /* consider this as additional, never-before, style */
  }
}

@keyframes if-over-threshold--after{
  to{ 
    content: "true"; 
    color: green; 
  }
}

div{
 --width: 70;           /* must be unitless */
 --height: 80px;
 --radius: 10px;
 --color: var(--color1);
 --widthThreshold: 50;
 --is-width-over-threshold: Min(1, Max(var(--width) - var(--widthThreshold), 0));

 
 text-align: center;
 white-space: nowrap;
 transition: .3s;
 
 /* if element is narrower than --widthThreshold */
 width: calc(var(--width) * 1%);
 height: var(--height);
 line-height: var(--height);
 border-radius: var(--radius);
 background: var(--color);

 /* else */
 animation: if-over-threshold--container forwards steps(var(--is-width-over-threshold));
}

/* prints some variables */
div::before{
  counter-reset: aa var(--width);
  content: counter(aa)"% is over 50% width ? ";
}

div::after{
  content: 'false'; 
  font-weight: bold; 
  color: darkred;
  
  /* if element is wider than --widthThreshold */
  animation: if-over-threshold--after forwards steps(var(--is-width-over-threshold)) ;
}
<div></div>

我发现我发现了一个Chrome错误，在需要特定类型的计算的某些情况下，该错误会影响此方法，但是有一种解决方法。

max

答案 16 :(得分：1)

CSS具有一项功能：条件规则。 CSS的此功能是根据特定条件应用的。 条件规则为：

  • @supports
  • @media
  • @document

语法： 

@supports ("condition") {

   /* your css style */

}

示例代码段： 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Supports Rule</title> 
    <style>      
        @supports (display: block) { 
            section h1 { 
                background-color: pink; 
                color: white; 
            } 
            section h2 { 
                background-color: pink; 
                color: black; 
            } 
        } 
    </style> 
</head> 
<body> 
    <section> 
        <h1>Stackoverflow</h1> 
        <h2>Stackoverflow</h2> 
    </section> 
</body> 
</html>

答案 17 :(得分：-1)

如果你在标签

中写css，你可以使用php 
<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style
相关问题
最新问题