我们可以在不使用任何框架的情况下在css中给出if else条件吗？答案

【问题标题】：can we give if else condition in css without using any framework [duplicate]我们可以在不使用任何框架的情况下在css中给出if else条件吗？
【发布时间】：2016-11-30 23:58:51
【问题描述】：

我在背景中有一张图片。我需要根据它来决定一些 div 的颜色。我怎样才能直接在 CSS 而不是任何脚本或 CSS 框架中实现它

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

【问题讨论】：

不，CSS 没有逻辑。为此使用类
您的问题与此类似：stackoverflow.com/questions/1129699/…
您正在使用任何服务器端脚本？比如 php,jsp,asp...等
这是一个重复的问题，如果我见过的话。

标签： css

【解决方案1】：

你不能。但是您可以使用此模式来实现：

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

【讨论】：

答案中使用的 isBackImgTower 变量在哪里。
@ismailbaig，我试图展示一个模式而不是纠正问题本身。比如教钓鱼。 ;)

【解决方案2】：

没有。 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;
}

【讨论】：

标记它赞成，因为虽然问题说它不想使用任何框架，但似乎不可能，我们需要使用任何框架。
@ismailbaig：谢谢！

【解决方案3】：

首先查看 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 来做到这一点

【讨论】：

您如何想象使用媒体查询检查背景图像？