Änderung der Titelfarbe der Foundation 5-Navigationsleiste

Question

Ich versuche, die Standardfarbe für meinen Titel zu ändern, die derzeit Weiß ist.

<nav class = "top-bar" data-topbar>
    <ul class = "title-area">
        <li class = "name">
            <h1><%= link_to "CF logo", root_path, class: "home"%></h1>
        </li>
    </ul>
</nav>

Ich habe versucht anzurufen

.name h1{
    color:red;
}

Und

.title-area .name h1{
    color:red;
}

sogar

.home{
    font-size: 1.5em;
    font-color: red;
}

aber keiner von ihnen funktioniert.Was kann ich machen?

Answer 1

Wenn sich Ihr Titel innerhalb eines Ankertags befindet <a> - Sie möchten so etwas:

.top-bar .name a { color: #9dcf81; }

Suchen Sie in Chrome nach der Überprüfung Ihres Elements nach dem Pluszeichen, sobald Sie Ihren Titel mit einem Mausklick hervorheben.Erwägen Sie die Verwendung von !important Attribut, wenn die Farbe nicht haftet.

p.s.- Bitte stellen Sie einen Link mit einem URL-Verkürzungsdienst (falls Sie Bedenken hinsichtlich des Datenschutzes haben) zu Ihrer Website bereit.

Answer 2

Ob eine CSS-Regel verwendet wird oder nicht, hängt von der Selector-Spezifität ab.Siehe das MDN für Details , wie Spezifität für einen CSS-Selektor istberechnet.

Wenn Sie sehen möchten, welche CSS-Anweisung Ihre eins überschreiben soll (vermutlich eines der in der Foundation-CSS-Bibliothek angegebenen Stile, die Sie verwenden, empfehlen Sie ein Tool wie Firebug- oder Chromentwickler-Tools, mit denen Sie inspizieren könnenein Element und sehen, welche Regeln berücksichtigt werden und die durch spezifischere Selektoren überschrieben werden.

Sie können auch important! innerhalb eines Selektors verwenden, um die Spezifität zu überschreiben, verwenden Sie dies jedoch mit Vorsicht.So zum Beispiel: -

generasacodicetagpre.