Verschiedene CSS Layouts für Verlinkungen erstellen/zuweisen

**WWSelec** · 11.09.2015, 08:02

Hallo,

ich stehe gerade vor einem kleinen CSS-Problem auf meiner Seite. Ganz unten sieht man zwei "Buttons". Der untere "Registrierung für neue Mitglieder" entspricht schon dem Design, wie beide Buttons aussehen sollen. Beides sind Module:

HTML-Code:

<!-- indexer::stop -->
<div class="btn">
<a href="{{link_url::anmelden}}">Login für den Mitgliederbereich</a>
</div>
<!-- indexer::continue -->

und

HTML-Code:

<!-- indexer::stop -->
<div class="btn">
Registrierung für neue Mitglieder
</div>
<!-- indexer::continue -->

Das Problem besteht an der Stelle sobald ich mit

HTML-Code:

arbeiten will. Sieht im CSS bei mir:

HTML-Code:

a {
    line-height:1;
    color:#000;
}

aus. Und entspricht dem Layout wie ich es sonst auf der Seite verwenden möchte, jetzt aber nicht bei den beiden Buttons. Ich glaube bei dem Problem führt eine Vererbung oder Priorisierung dazu, dass egal was kommt immer das CSS von "a" genutzt wird,... nur eine Vermutung xD

Das CSS für die Button sieht so aus:

HTML-Code:

.btn {
    width:25%;
    color:#fff;
    -webkit-border-radius: 4;
    -moz-border-radius: 4;
    border-radius: 4px;
    font-family: Georgia;
    font-size: 20px;
    background: #8a5cb3;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

Hier ist auch die Schriftfarbe auf weiß gesetzt.

Meine Browsertabliste und diverse Googleanfragen habe mir bisher leider keine Klarheit verschaffen können. Ich hoffe jemand kann mir vielleicht diese CSS Grundlage oder meinen Denkfehler erklären

Danke, WWSelec

*edit: Einen CSS Eintrag mit:

HTML-Code:

a.btn {
    line-height:1;
    color:#14decd;
}

habe ich testweise schon versucht, um eine Editierung nur bei "btn" zu erzwingen, leider ohne Erfolg.

**Spooky** · 11.09.2015, 08:07

öh, dann überschreib es halt einfach mit

PHP-Code:


.btn a {

    …

}

Oder .btn > a

**tab** · 11.09.2015, 08:29

Will heissen, dass Eigenschaften, die direkt dem entsprechenden Element (bei dir <a>) zugewiesen werden, eine höhere Spezifizität haben als "ererbte" Eigenschaften. Dein a-Tag erbt zwar die Schriftfarbe #fff vom umschliessenden div-Element (.btn), aber die direkte Zuweisung an "a" zählt eben mehr. Wenn du die Farbe und eventuell weitere gewünschte Eigenschaften für das a-Tag innerhalb eines Elements mit der Klasse "btn" so setzt wie von Spooky vorgeschlagen, dann setzt du diese Eigenschaft eben auch direkt für solche a-Tags. Durch die zusätzlich angegebene Klasse für ein (bzw das) umgebendes Element zählt das dann noch mehr (ist "spezifischer") und überschreibt deshalb die andere Eigenschaft.