如何让条件 CSS 在 Blogger/Blogspot 上工作？答案

【问题标题】：How to get conditional css to work on Blogger/Blogspot?如何让条件 CSS 在 Blogger/Blogspot 上工作？
【发布时间】：2014-05-23 15:38:56
【问题描述】：

我正在尝试让条件 CSS 在 Blogger / Blogspot 中工作 - 可能缺少一些明显和基本的东西来使其工作，但我们开始了。

我发现的许多教程都提供了说明，但是当我遵循它们时它们不起作用（注意：当在模板正文中用于隐藏某些页面上的某些小部件时它们可以完美地工作，但我无法获得它们努力为不同页面上的不同元素设置不同的样式）。

因此，作为示例，我希望根据您在 here 上的页面使用不同的日期背景颜色。

日期标题样式为：

    .date-header span {
      background-color: #FF8BBF;
      color: $(date.header.color);
      padding: $(date.header.padding);
      letter-spacing: $(date.header.letterspacing);
      margin: $(date.header.margin);
    }

我希望日期的背景颜色在另一个页面上有所不同，因此根据各种教程，我在模板结束头标记上方添加了以下代码。

<b:if cond='data:blog.url == "http://mgmmediaadditionaldemoblog.blogspot.com.au/search/label/Test2"'>
<style>
  .date-header span {
    background-color: #FF937E;
  }
</style>
</b:if>

但它不会改变指定页面的颜色。我已经尝试过变体 - 将条件代码放在头部的 b:skin 或 b:template-skin 部分，但我无法使其工作 - 对此的任何帮助将不胜感激！

【问题讨论】：

您需要从 JS 中检查条件并在那里动态应用样式。
使用jquery，检查url，然后应用颜色。

标签： css conditional blogger blogspot

【解决方案1】：

试试这个代码：
<b:if cond='data:blog.searchLabel == "Test2"'> <style> .date-header span { background-color: #FF937E!important; } </style> </b:if>

Test2 是标签，将!important 添加到您的颜色代码以使浏览器加载background-color: #FF937E 而不是background-color: #FF8BBF;。

我等待您的反馈:)

【讨论】：

你是一个传奇人物，这已经很完美了，我可以适应解决其他类似的问题（例如背景颜色、h1 下划线颜色等） - 非常感谢！