CSS「if」聲明的等效

Question

有什麼方法可以在CSS中使用條件語句嗎？

Answer 1

不可以，但你可以舉個例子你心目中的？什麼條件你想檢查？

也許Sass或Compass對你很有意思。從薩斯

報價：

薩斯又讓CSS樂趣。 Sass是CSS，加上嵌套的規則，變量，mixins等等，所有這些都以簡明易懂的語法表達。

Answer 2

CSS中唯一可用的條件是selectors和@media。一些瀏覽器支持一些CSS 3 selectors和media queries。

如果它與選擇器匹配或不匹配（例如，通過添加一個新類），可以使用JavaScript修改元素以進行更改。

Answer 3

css文件不支持條件語句。

如果您希望看到某種情況，可以使用服務器端腳本語言或JavaScript爲其提供合適的類。例如

<div class="oh-yes"></div> 
<div class="hell-no"></div> 

Answer 4

您的樣式表應該被認爲是一個可用變量的靜態表，您的html文檔可以根據您需要顯示的內容調用。該邏輯應該在你的javascript和html中，如果你真的需要的話，可以使用javascript來動態應用基於條件的屬性。樣式表不是邏輯的地方。

Answer 5

不，你不能做，如果在CSS，但你可以選擇將使用哪種樣式表

下面是一個例子：

<!--[if IE 6]> 
Special instructions for IE 6 here 
<![endif]--> 

將只能使用IE 6這裏是網站它是從http://www.quirksmode.org/css/condcom.html，只有IE有條件註釋。其他瀏覽器不這樣做，儘管有一些屬性可以用於以-moz開頭的Firefox或以-webkit開頭的safari。你可以使用javascript來檢測你正在使用的瀏覽器，如果你想要執行的任何操作都使用javascript，但這是一個壞主意，因爲它可以被禁用。

Answer 6

沒有提供原生的if/else可用的CSS。 CSS預處理器如SASS（和Compass）可以提供幫助，但是如果您正在尋找更多功能特定的if/else條件，您應該嘗試使用Modernizr。它進行功能檢測，然後向HTML元素添加類，以指示瀏覽器支持並不支持哪些CSS5功能。然後，你可以寫非常的if/else，如CSS就在你的CSS沒有任何預處理，如：

.geolocation #someElem { 
    /* only apply this if the browser supports Geolocation */ 
} 
.no-geolocation #someElem { 
    /* only apply this if the browser DOES NOT support Geolocation */ 
} 

請記住，你應該總是逐步增強，因此，而不是上面的例子中（其中說明了這一點更好的），你應該更喜歡這樣寫的東西：

#someElem { 
    /* default styles, suitable for both Geolocation support and lack thereof */ 
} 
.geolocation #someElem { 
    /* only properties as needed to overwrite the default styling */ 
} 

注意，Modernizr的不依賴於JavaScript，因此，如果JS被禁用，你不會得到任何東西。因此，#someElem的漸進式增強方法首先作爲非js基金會。

Answer 7

我想說在CSS中最接近「IF」的是媒體查詢，比如那些可以用於響應式設計的媒體查詢。通過媒體查詢，您可能會說：「如果屏幕寬度在440像素到660像素之間，請執行此操作」。瞭解更多有關媒體查詢這裏：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp，這裏是他們如何看一個例子：

@media screen and (max-width: 300px) { 
body { 
    background-color: lightblue; 
} 

這就是相當多的程度「IF」 CSS中，除了移動到SASS/SCSS（如上所述） 。

我認爲你最好的選擇是在腳本語言中改變你的類/ ID，然後在CSS中處理每個類/ ID選項。例如，在PHP中，它可能是這樣的：

<?php 
    IF(A>B){ 
echo '<div class="option-a">'; 
} 
    ELSE { 
echo '<div class="option-b">'; 
} 
?> 

然後你的CSS可以像

.option a { 
background-color:red; 
} 
.option b { 
background-color:blue; 
} 

Answer 8

我認爲，你可以使用if語句在CSS。雖然他們沒有這樣的措辭。在下面的例子中，我說過，如果複選框被選中，我希望背景變成白色。如果你想查看一個工作示例www.armstrongdes.com。我爲客戶建立了這個。重新調整窗口大小，以便移動導航接管並點擊導航按鈕。所有的CSS。我認爲可以肯定地說這個概念可以用於很多事情。

 #sidebartoggler:checked + .page-wrap .hamb { 
     background: #fff; 
     } 

// example set as if statement sudo code. 

if (sidebaretoggler is checked == true) { 
set the background color of .hamb to white; 
} 

Answer 9

的@supports規則（92％的瀏覽器支持2017年七月）規則可用於條件邏輯上的CSS屬性：

@supports (display: -webkit-box) { 
    .for_older_webkit_browser { display: -webkit-box } 
} 

@supports not (display: -webkit-box) { 
    .newer_browsers { display: flex } 
} 

Answer 10

CSS本身不具備條件語句，但這裏的a hack involving custom properties（又名「css變量」）。

在這個微不足道的例子中，你想要應用基於某個條件的填充，比如「if」語句。

:root { --is-big: 0; } 

.is-big { --is-big: 1; } 

.block { 
    padding: calc(
    4rem * var(--is-big) + 
    1rem * (1 - var(--is-big)) 
); 
} 

所以這是一個.is-big或者這是一個的後代將有4rem的填充，而所有其他的塊只有1rem任何.block。現在我稱之爲「微不足道」的例子，因爲它可以在沒有黑客的情況下完成。

.block { 
    padding: 1rem; 
} 

.is-big .block, 
.block.is-big { 
    padding: 4rem; 
} 

但是我會將它的應用程序留給你的想象。