La couleur de la classe d'en-tête sIFR ne change pas - sifr

J'ai deux cours h1 - un doit être vert et un doit être bleu. Dans sifr-config je l’ai réglé comme ceci:

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

et dans mon code, j'ai le jeu h1 comme ceci:

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

Cependant, la couleur ne change pas. Quelqu'un sait-il comment résoudre ce problème? Merci!

Réponses:

Remplacer h1 prend déjà soin de remplacer h1.blue. Remplacement h1.blue D'abord, vous pourrez définir un style différent.

Vous pouvez également envelopper le texte à l'intérieur du <h1> dans un <span class="blue"> et ensuite utiliser .blue en tant que sélecteur pour donner au texte une couleur bleue.

Du sIFR 3 Docs: Si vous souhaitez utiliser un sélecteur général et des sélecteurs plus spécifiques, assurez-vous que le sélecteur le plus spécifique est remplacé en premier. i.e. "h1.foo" est plus haut sur la page que "h1"

Il s’agit donc simplement de réorganiser les éléments:

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

Essayez comme ça:

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

Vous ne devez pas utiliser deux fonctions de remplacement, vous pouvez sélectionner la balise h1 avec "sIFR-root", et la balise h1.blue par la suite.

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

MODIFIER: En fait, je ne suis pas sûr que cela fonctionne de cette façon ... cela fonctionne pour des choses comme les liens (a), mais pas sûr que cela fonctionnerait avec des classes.