你可以在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條件嗎？

回答

相關問題