CSS「if」聲明的等效

有什麼方法可以在CSS中使用條件語句嗎？CSS「if」聲明的等效

來源

2010-03-15 BreakHead

10個問題？ 0接受？你真的應該開始。點擊您問題的最佳答案的勾號。 – Quentin 2010-03-15 11:58:07

嘿大衛我接受了答案，但它仍然顯示0％接受:( – BreakHead 2010-03-15 12:12:16

這個問題太廣泛了。有多種條件：瀏覽器窗口大小，DOM中元素的位置，瀏覽器是否支持語法，元素是否具有特定樣式等。請解釋您的問題，首先嚐試的內容以及可能的代碼幫幫我。 – chharvey 2017-12-28 07:32:28

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

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

報價：

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

來源

2010-03-15 11:51:36

他我在JS中有這樣的行爲：https：//jsfiddle.net/9erLby1o/3，它檢查內部elementh啊比parent更大的diwdth，然後它增加溢出，我想讓我的表通用，因爲我不知道數字列和寬度。我想知道是否可行與CSS或一些預處理器SASS或指南針 – partizanos 2016-12-05 13:17:59

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

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

來源

2010-03-15 11:51:09 Quentin

css文件不支持條件語句。

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

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

來源

2010-03-15 11:53:13

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

來源

2010-03-15 11:53:35 dagoof

不，你不能做，如果在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，但這是一個壞主意，因爲它可以被禁用。

來源

2010-03-15 11:54:31 ant

沒有提供原生的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基金會。

來源

2011-03-28 02:19:12 KuraFire

我想說在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; 
}

來源

2014-11-13 19:50:26

我認爲，你可以使用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; 
}

來源

2015-09-24 22:29:30 Ardent780

OOF，宇宙中最古老的CSS黑客。不是絕對的最佳做法，但是，這絕對有可能。我想知道OP究竟在努力做什麼？ – CollinD 2015-09-24 22:33:01

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

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

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

來源

2017-07-26 14:36:34

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; 
}

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

來源

2017-12-28 07:23:26 chharvey

CSS「if」聲明的等效

回答

相關問題