Question

我有两个h1类 - 一个需要是绿色，一个需要是蓝色。在sifr-config中我设置如下：

sIFR.replace(aldo, {
  selector: 'h1',
  css: '.sIFR-root { color: #b2bc35; font-size: 24px; }'
});

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root { color: #569fd3; font-size: 24px; }'
});

在我的代码中我的h1设置如下：

<h1 class="blue">The Need</h1>

然而，颜色并没有改变。有谁知道如何解决这一问题？谢谢！

Answer 1

替换h1已经负责替换h1.blue。首先替换h1.blue将允许您定义不同的样式。

您也可以将<h1>内的文字包裹在<span class="blue">中，然后使用.blue作为选择器，为文字指定蓝色。

Answer 2

来自sIFR 3文档：如果您想使用常规选择器和更具体的选择器，请确保首先替换最具体的选择器。即'h1.foo'在页面上高于'h1'

所以这只是重新排序元素的问题：

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root { color: #569fd3; font-size: 24px; }'
});

sIFR.replace(aldo, {
  selector: 'h1',
  css: '.sIFR-root { color: #b2bc35; font-size: 24px; }'
});

Answer 3

试试这样：

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root' { 'color': '#569fd3', 'font-size': '24px' }
});

Answer 4

您不必使用两个替换函数，可以选择带有“sIFR-root”的h1标签，然后选择h1.blue标签。像这样：

sIFR.replace(aldo, {
    selector: 'h1',
    css: [
      '.sIFR-root {color: #b2bc35; font-size: 24px;}', //this is the h1 tag itself
      '.blue {color: #b2bc35; font-size: 24px;}'
      ]
});

编辑：实际上我不确定它是否正常工作......它确实适用于链接（a），但不确定它是否适用于类。

sIFR标题类颜色没有变化

4 个答案: