2009-08-23 2 views
1

Ich möchte Einstellungen überschreiben, die bereits mit der Auswahl Eltern Selektor definiert, aber ich weiß nicht wie. Sag mal, gibt es zwei Seiten auf einer Website wie folgt aus ...Sifr3 - Ist es möglich, das CSS-Styling mit dem Eltern-Selektor zu überschreiben?

-Startseite Seite-
<body><h1 class="sifr">Home</h1></body>

-Über Seite-
<body class="about"><h1 class="sifr">About</h1></body>

dann, ich habe diese in sirf- config.js ...

sIFR.replace (Fontname, { selector: 'h1.sifr', CSS: '.sIFR-root {color: # 666666; font-size: 29px;}' });

sIFR.replace (Fontname, { selector: 'body.about h1.sifr', CSS: '.sIFR-root {color: # FFFFFF; font-size: 29px;}' });

aber es funktioniert nicht ...

Wenn jemand mir helfen, würde ich schätzen.

+0

Danke für die Antworten, aber das ist sifr-config.js spezifische Frage. Ich weiß, wie einfach es ist, nur mit CSS zu arbeiten, aber mit Sifr ist das anscheinend nicht der Fall. Ich kämpfe immer noch um dies zu erreichen, bitte jemand helfen! Ich hätte wahrscheinlich auch JavaScript getaggt. –

Antwort

0

Führen Sie den Ersatz für body.about h1.sifrvorh1.sifr. sIFR berechnet keine Spezifität, sondern führt die Ersetzungen in der richtigen Reihenfolge durch. Ersetzen h1.sifr ersetzt alle solche Elemente, so body.about h1.sifr findet nur Elemente, die bereits ersetzt wurden.

+0

Vielen Dank. Du bist der Star! Ich wusste davon nichts, aber jetzt mag ich mehr und mehr sifr! –

0

Überprüfen Sie die Bestellung Ihr Laden CSS vs die Befehle ersetzen Ausgabe ...

0

Ich benutze Sifr nicht, so dass ich nicht genau weiß, wie es funktioniert. Ich gehe davon aus, dass der Code CSS-Code wie folgt erstellt:

h1.sifr { color: #666666; font-size: 29px; } 
body.about h1.sifr { color: #FFFFFF; font-size: 29px; } 

Ist dies der Fall, dass die Farbe Stil für die Überschrift in der About-Seite außer Kraft setzen, wie der Wähler für die zweite Zeile spezifischer als der Wähler ist in die erste Zeile.

Sie können mehr über Spezifität here lesen.

Wenn es nicht funktioniert, liegt es daran, dass etwas in Ihrem Code nicht so aussieht, wie Sie denken, und es könnte sich auch um etwas in einem anderen Teil Ihres Codes handeln, den Sie nicht angezeigt haben Hier verursacht das das Problem.

Sie können das Firebug-Plugin in Firefox verwenden, um die Elemente auf der Seite zu überprüfen, um genau zu sehen, welche CSS jedes Element beeinflusst.

Verwandte Themen