我們可以給如果其他條件在CSS不使用任何框架

我在後臺有一個圖像。我需要根據它決定一些div的顏色。我如何直接在CSS而不是任何腳本或CSS框架實現它我們可以給如果其他條件在CSS不使用任何框架

if (isBackImgTower){ 
    color:#fff; //(then i want to apply the color #fff) 
} 
else{ 
    color:#000; 
}

來源

2016-07-27 Manoj Kumar

不，CSS沒有邏輯。使用類 – Justinas

您的問題看起來類似於此：http://stackoverflow.com/questions/1129699/can-you-use-if-else-conditions-in-css –

您正在使用任何服務器端腳本？像php，jsp，asp ...等 –

根本就沒有。 CSS不支持邏輯。

因此，您需要像這樣的簡單邏輯，像SASS/SCSS這樣的css預處理器。

樣品SCSS[這可能無法給出確切的答案 - 但只是爲了得到一個想法]，

$isBackImgTower: true; 

div { 
    @if $isBackImgTower == true { 
    color: #fff; 
    } @else { 
    color: #000; 
    } 
}

但是，爲什麼不直接使用一類具有background-image財產？有什麼理由嗎？

實施例，

div { 
    color: #000; 
} 
div.isBackImgTower { 
    background-image:url('images/tower.jpg'); 
    color: #fff; 
}

來源

2016-07-27 06:27:30

標記爲upvote，因爲雖然問題說它不想使用任何框架，但似乎是不可能的，我們需要去任何框架。 –

@ismailbaig：謝謝！ –

你不能。但是你可以用這個模式來實現這一目標：

.background-tower{ 
    background-image:url('tower.jpg'); 
} 

.background-sky{ 
    background-image:url('sky.jpg'); 
} 

.background-tower, .background-tower a /* <--a tags inside tower */{ 
    color:#fff; 
} 

.background-sky { 
    color:#000; 
}

而且幾乎你的HTML應該是這樣的：

<div class='background-tower'> 
    <a href="#">some text</a> 
    some other text,... 
</div>

來源

2016-07-27 06:22:26 rejnev

isBackImgTower變量在答案中使用。 –

@ismailbaig，我試圖展示一種模式，而不是糾正問題本身。喜歡教釣魚。 ;） – rejnev

尋找第一個CSS medai查詢。如果你不能找到你想要的東西，你可以使用jQuery或其他選擇。例如

if ($("#samplediv").attr("data-state") == "a value") { 
$("#samplediv").addClass("class-for-a-value"); 
} else { 
$("#samplediv").addClass("class-for-not-a-value"); 
}

這是一個邏輯改變CSS類。你不能這樣做只用css

來源

2016-07-27 06:32:24

你如何想象使用媒體查詢檢查背景圖片？ – Justinas

我們可以給如果其他條件在CSS不使用任何框架

回答

相關問題