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

Posted 2023-03-14

【中文标题】我们可以在不使用任何框架的情况下在css中给出if else条件吗？

【英文标题】：can we give if else condition in css without using any framework [duplicate]

【发布时间】：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 没有逻辑。为此使用类

您的问题与此类似：***.com/questions/1129699/…

您正在使用任何服务器端脚本？比如 php,jsp,asp...等

这是一个重复的问题，如果我见过的话。

【参考方案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 来做到这一点

【讨论】：

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