Question

在我的模板中，我想如果span内容具有“全职工作”，则按钮颜色为蓝色，否则按钮颜色为红色。

<div class="tag MB-3"><i class="nil-tag"></i>
  <%=Job-data. Rows[i]["date"] %>
</div>

<span class="full-time"><%=Job-data. Rows[i]["Time"] %></span>
</div>
<div class="tag MB-3"><i class="nil-tag"></i> </div>
<span class="full-time">full time</span>
</div>

Answer 1

如果可以访问HTML，则可以为此使用类。考虑这个：
<p class="normal">Text</p>

<p class="active">Text</p> and in your CSS file:


p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}
这是CSS的实现方式。

然后有CSS预处理程序，例如Sass。您可以使用条件   在那里，看起来像这样：
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
缺点是，您必须预处理样式表，   并且条件是在编译时而不是运行时评估的。

自定义属性（又称CSS）是CSS的新功能   变量）。在运行时对它们进行评估（在支持   他们）。

与他们一起，您可以做一些事情：
:root {
  --main-bg-color: brown;
}

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

.two {
  background-color: black;
}
最后，您可以使用自己喜欢的样式对样式表进行预处理服务器端语言。如果您使用的是PHP，请提供一个style.css.php文件，看起来像这样：
p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}
在这种情况下，由于对性能有影响，因为缓存这样的样式表将很困难。

如果是全职，则按钮颜色为蓝色，但如果是兼职，则按钮颜色为红色

1 个答案: