我想在我的CSS中使用條件。

想法是我有一個(gè)變量，當(dāng)站點(diǎn)運(yùn)行時(shí)我替換它來生成正確的樣式表。

我希望它能根據(jù)這個(gè)變量改變樣式表！

看起來像是:

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

這能做到嗎？你是怎么做到的？

不是傳統(tǒng)意義上的，但是如果你有HTML的權(quán)限，你可以用類來做這件事。考慮一下這個(gè):

<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預(yù)處理器。你可以用條件句，看起來像這樣:

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

缺點(diǎn)是，您必須對(duì)樣式表進(jìn)行預(yù)處理，并且條件是在編譯時(shí)計(jì)算的，而不是在運(yùn)行時(shí)。

CSS本身的一個(gè)新特性是自定義屬性(也稱為CSS變量)。它們?cè)谶\(yùn)行時(shí)被評(píng)估(在支持它們的瀏覽器中)。

有了它們，你可以做一些事情:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

最后，您可以用自己喜歡的服務(wù)器端語言預(yù)處理樣式表。如果你使用PHP，提供一個(gè)style.css.php文件，看起來像這樣:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

在這種情況下，您將會(huì)受到性能影響，因?yàn)榫彺孢@樣的樣式表將會(huì)很困難。

從更高的層面來看，Ahmad Shadeed在本文中展示了許多非常有用的技術(shù)，可以用來判斷UI開發(fā)中經(jīng)常出現(xiàn)的純CSS中的if/else問題。

我很驚訝沒有人提到CSS偽類，它也是CSS中的一種條件。你可以用它做一些非常高級(jí)的事情，不需要一行JavaScript代碼。

一些偽類:

:active -元素是否被單擊？ :選中-是否選中了單選按鈕/復(fù)選框/選項(xiàng)？(這允許通過使用復(fù)選框進(jìn)行條件樣式化！) :empty -元素是否為空？ :全屏-文檔是否處于全屏模式？ :focus -元素有鍵盤焦點(diǎn)嗎？ :focus-within -該元素或它的任何子元素有鍵盤焦點(diǎn)嗎？ :has([selector]) -元素是否包含與[selector]匹配的子元素？(遺憾的是，主流瀏覽器都不支持。) :hover -鼠標(biāo)懸停在該元素上嗎？ :在范圍內(nèi)/:超出范圍-輸入值是否在最小和最大限值之間/之外？ :invalid/:valid -表單元素是否包含無效/有效的內(nèi)容？ :鏈接-這是一個(gè)未訪問的鏈接嗎？ :not() -反轉(zhuǎn)選擇器。 :target -這個(gè)元素是URL片段的目標(biāo)嗎？ :已訪問-用戶以前訪問過此鏈接嗎？ 示例:

div { color: white; background: red }
input:checked + div { background: green }

<input type=checkbox>Click me!
<div>Red or green?</div>

我已經(jīng)寫了一篇關(guān)于CSS-Tricks中下面這個(gè)獨(dú)特的方法的文章，它將會(huì)更詳細(xì)

我設(shè)計(jì)了下面的演示，使用了一些技巧來模擬一些屬性的if/ else場(chǎng)景。本質(zhì)上是數(shù)字的任何屬性都是這個(gè)方法的目標(biāo)，但是具有文本值的屬性是。

這段代碼有3個(gè)if/else場(chǎng)景，分別是不透明度、背景色和。寬度。這三個(gè)變量都由兩個(gè)布爾變量bool和它的反義詞notBool控制。

這兩個(gè)布爾值是這個(gè)方法的關(guān)鍵，要從一個(gè)非布爾值動(dòng)態(tài)值中獲得一個(gè)布爾值，需要一些數(shù)學(xué)知識(shí)，幸運(yùn)的是CSS允許使用min & amp最大函數(shù)。

顯然，最近的瀏覽器版本支持這些函數(shù)(最小值/最大值),同時(shí)也支持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>

您可以結(jié)合使用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;
}

概念

以下是我以前的回答，現(xiàn)在仍然有效，但我今天有了一個(gè)更固執(zhí)己見的方法:

CSS這么爛的原因之一恰恰是它沒有條件語法。CSS本身在現(xiàn)代的網(wǎng)絡(luò)堆棧中是完全不可用的。稍微用一下SASS，你就知道我為什么這么說了。SASS有條件語法...和許多其他優(yōu)于原始CSS的優(yōu)點(diǎn)。

舊答案(仍然有效):

一般用CSS是做不到的！

瀏覽器條件如下:

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

但是沒有人阻止您使用Javascript來改變DOM或者動(dòng)態(tài)地分配類，甚至在您各自的編程語言中連接樣式。

我有時(shí)會(huì)將css類作為字符串發(fā)送給視圖，并將其回顯到代碼中，如下所示(php):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>

您可以創(chuàng)建兩個(gè)單獨(dú)的樣式表，并根據(jù)比較結(jié)果包含其中一個(gè)

在其中一個(gè)你可以把

background-position : 150px 8px;

在另一個(gè)

background-position : 4px 8px;

我認(rèn)為在CSS中唯一可以執(zhí)行的檢查是瀏覽器識(shí)別:

條件-CSS

CSS是一個(gè)精心設(shè)計(jì)的范例，它的許多特性并沒有被廣泛使用。

如果您所說的條件和變量是指將某個(gè)值的變化分布到整個(gè)文檔的機(jī)制，或者在某個(gè)元素的范圍內(nèi)，那么應(yīng)該這樣做:

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>

你可以用not代替if like

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

設(shè)置服務(wù)器將css文件解析為PHP，然后用一個(gè)簡(jiǎn)單的PHP語句定義變量variable。

當(dāng)然，這是假設(shè)您正在使用PHP...

這是對(duì)以上Boldewyn回答的一點(diǎn)額外信息。

添加一些php代碼來完成if/else

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

CSS有一個(gè)特點(diǎn):條件規(guī)則。CSS的這一特性是基于特定條件來應(yīng)用的。條件規(guī)則包括:

@支持 @媒體 @文檔 語法:

@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>

據(jù)我所知，css中沒有if/then/else。或者，您可以使用javascript函數(shù)來改變?cè)氐谋尘拔恢脤傩浴?/p>

還有一種選擇(根據(jù)您是否希望動(dòng)態(tài)評(píng)估if語句)是使用C預(yù)處理器，如這里所述。

為此，您可以使用javascript，如下所示:

首先，為“普通”類和“活動(dòng)”類設(shè)置CSS 然后你給你的元素賦予id‘my element’ 現(xiàn)在，您用JavaScript創(chuàng)建您的條件，如下例所示...(您可以運(yùn)行它，將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>

您可以為所有條件范圍添加容器div。

將條件值作為一個(gè)類添加到容器div中。(可以通過服務(wù)器端編程- php/asp來設(shè)置...)

<!--container div-->
<div class="true-value">
   <!-- your content -->
   <p>my content</p>
   <p>my content</p>
   <p>my content</p>
</div>

現(xiàn)在，您可以使用嵌套選擇器將容器類作為div中所有元素的全局變量，而無需將該類添加到每個(gè)元素中。

.true-value p{
   background-color:green;
}
.false-value p{
   background-color:red;
}

除了上面的答案，另一種直接使用類似if/else的條件的方式，甚至更接近于其他腳本語言，將是通過@when / @else條件。實(shí)現(xiàn)這些條件是為了練習(xí)容易識(shí)別的邏輯鏈，例如:

@when supports(display: flex) {
    .container {
        display: flex
    }
} @else media and (min-width: 768px) {
    .container {
        min-width: 768px
    }
} @else {
    .container {
        width: 100%
    }
}

截至2022年2月，沒有瀏覽器支持。請(qǐng)參閱W3C模塊了解更多信息。

(對(duì)，老線程。但它出現(xiàn)在谷歌搜索的頂部，所以其他人可能也會(huì)感興趣)

我猜if/else邏輯可以用javascript來完成，它反過來可以動(dòng)態(tài)地加載/卸載樣式表。我還沒有在不同的瀏覽器上測(cè)試過。但是應(yīng)該可以。這將幫助您開始:

http://www . JavaScript kit . com/Java tutors/load JavaScript CSS . shtml

如果您愿意使用jquery，可以在html中使用javascript設(shè)置條件語句:

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

這將改變的文本顏色。如果變量的值大于0，則將類初始化為綠色。

其他答案中似乎沒有提到的一個(gè)選項(xiàng)是屬性選擇器。例如，您可以在div標(biāo)簽上設(shè)置數(shù)據(jù)屬性

<div data-var="2">

然后為div定義一個(gè)具有右屬性值的選擇器作為if情況，為else情況定義一個(gè)沒有屬性選擇器的div選擇器:

div[data-var="2"] {
    background-position : 150px 8px;
}
div {
    background-position : 4px 8px;
}