kolor nagłówka sIFR nie zmienia się - sifr

Mam dwie klasy h1 - jedna musi być zielona, ​​a druga niebieska. W sifr-config mam to ustawione tak:

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

i w moim kodzie mam h1 ustawiony w ten sposób:

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

jednak kolor się nie zmienia. Czy ktoś wie, jak to naprawić? Dzięki!

Odpowiedzi:

Wymiana h1 już zajmuje się wymianą h1.blue. Wymiana h1.blue najpierw pozwoli ci zdefiniować różne style.

Możesz także owinąć tekst wewnątrz <h1> w <span class="blue"> a następnie użyć .blue jako selektor, aby nadać tekstowi niebieski kolor.

Z Dokumentów sIFR 3: Jeśli chcesz użyć selektora ogólnego i bardziej szczegółowych, upewnij się, że ten najbardziej szczegółowy zostanie zastąpiony w pierwszej kolejności. tzn. „h1.foo” jest wyżej na stronie niż „h1”

Więc to tylko kwestia zmiany kolejności elementów:

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

Wypróbuj tak:

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

Nie musisz używać dwóch funkcji zamiany, możesz wybrać znacznik h1 za pomocą „sIFR-root”, a następnie znacznik h1.blue. Jak to:

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

EDYTOWAĆ: Właściwie nie jestem pewien, czy to działa w ten sposób ... działa dla takich rzeczy jak links (a), ale nie jestem pewien, czy będzie działać z klasami.