Ich verstehe nicht, wie man verschachtelte Elemente anspricht via CSS

shoppi · 12. April 2014

Code

<p id="MwStVersand">




		<span id="Versandkosten">




			<a href="..." class="iframe">
			{l s='shipping costs'}
			</a>




	</span>
</p>

Alles anzeigen

Ich hätte erwartet, es ginge so:

CSS

#MwStVersand {
clear:both;
padding-top:5px;
font-size: small;
}




#versandkosten {
	font-size: 19px!important;
}

Alles anzeigen

Dummerweise klappt es aber nicht, nur die ID Versandkosten zu ändern (Textgröße).

Könnte mir jemand das bitte mal grundlegend erklären`?

Danke

wolf · 12. April 2014

CSS

font-size: 19px!important; /*hier fehlt ein Leerzeichen zwischen px und !  */
font-size: 19px !important; /* sollte gehen. */

Wenn du das !important nicht wirklich brauchst (Ich habe es noch NIE gebraucht), dann lass es weg, das macht nur Ärger!

Zu verschachtelten Elementen..

HTML

<!DOCTYPE html>
<html>
<body>
    <!-- Erste Ebene -->
    <header>
    </header>
    <section>
        <!-- Zweite Ebene -->
        <article>
            <!-- Dritte Ebene -->
            <header>
                <!-- Vierte Ebene -->
                <h2>Eine Weitere Überschrift</h2>
            </header>
            <p class="inhalte"></p>
        </article>
    </section>
    <footer>
    </footer>
</body>
</html>

Alles anzeigen

CSS

body > header{
    /* Spricht NUR den header, der DIREKTES Kind von body ist, an. 
     * (Und ist sozusagen auch !important).
     */
}
body header{
    /* Spricht ALLE header, die Kinder von body sind, an. */
}
header{
    /* Spricht ALLE header an. */
}
article header{
    /* Spricht NUR header, die Kinder von article sind, an. */
}
section article .inhalte{
    /* Spricht ALLE Elemente (mit der Klasse .inhalte),
     * die Kinder von article sind, was wiederum
     * Kind von section ist.
     */
}
.inhalte{
    /* Spricht ALLE Elemente (mit der Klasse .inhalte) an. */
}




/* hier darauf achten Element und Klasse, OHNE Leerzeichen verbinden */
p.inhalte{
    /* NICHT EMPFOHLEN SO ZU ARBEITEN ABER MANCHMAL NÖTIG. :)
     *
     * Spricht alle Elemente P an, die Klasse .inhalte HABEN.
     */
}
/* überall wo ich Klassen verwendet habe,
 * funktioniert es auch mit Id's
 * einfach . durch ein # ersetzen
 */

Alles anzeigen

Ich denke das reicht fürs erste

cottton · 12. April 2014

HTML

<span id="Versandkosten">

CSS

#versandkosten

V und v - ist nicht das Gleiche =)

Ich verstehe nicht, wie man verschachtelte Elemente anspricht via CSS

Jetzt mitmachen!

Teilen