sIFR 标头类颜色未更改

发布于 2024-08-05 12:28:24 字数 425 浏览 3 评论 0原文

我有两个 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>

但是，颜色没有改变。有谁知道如何解决这个问题？谢谢！

原文

I have two h1 classes - one needs to be green and one needs to be blue. In sifr-config I have it set like this:

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; }'
});

and in my code I have the h1 set like this:

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

however, the color isn't changing. Does anyone know how to fix this? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏尔 2024-08-12 12:28:24

替换 h1 已经可以替换 h1.blue。首先替换 h1.blue 将让您定义不同的样式。

您还可以将文本包装在中的

内，然后使用 `.blue`作为给文本赋予蓝色的选择器。

回复收藏 0 原文

橘虞初梦 2024-08-12 12:28:24

来自 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; }'
});

From the sIFR 3 Docs: If you want to use a general selector and more specific ones, make sure the most specific one is replaced first. i.e. 'h1.foo' is higher on the page than 'h1'

So it's just a matter of reordering the elements:

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; }'
});

回复收藏 0 原文

云朵有点甜 2024-08-12 12:28:24

试试这样：

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

Try it like this:

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

回复收藏 0 原文

内心激荡 2024-08-12 12:28:24

您不必使用两个替换功能，您可以选择带有“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）之类的东西，但不确定它是否适用于类。

You don't have to use two replace functions, you can select the h1 tag with "sIFR-root", and the h1.blue tag after that. Like so:

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;}'
      ]
});

EDIT: Actually I'm not sure it works this way... it does work for things like links (a), but not sure it would work with classes.

回复收藏 0 原文

~没有更多了~