Und noch eine CSS-Frage zum Thema Vererbung

Computer: Software & Programmierung HTML & CSS
#1

Hallo nochmal an alle!

Es gibt da mal wieder einen Punkt, den ich nicht raffe und ich hoffe, ihr könnt mir dabei helfen.
Es geht um das Thema Vererbung.
So ich es richtig verstehe, sind ja Kindelemente all jene Elemente, die von einem anderen Tag umschlossen sind.
Wenn ich eine ul habe, darunter dann mehrere li und diese dann mittels /ul wieder schließe, dann sind die li-Elemente die Kinder und sollten die Eigenschaften der Eltern übernehmen.

Nun über ich gerade die Spezifität und stelle fest:

CSS

p Schriftfarbe Rot
#Test p Schriftfarbe blau

HTML-Code 1:

p Dies ist ein Testtext /p
id=„test“ p Dies ist ein anderer Testtext /p

Ergebnis= alles in blau
(klar, weil die id eine höhere Spezifität hat)

HTML-Code 2

p Dies ist ein Testtext
div id=„test“ p Dies ist ein anderer Testtext /p /div

Ergebnis: erste Zeile rot, zweite blau

Wenn ich nun aber das CSS verändere und statt des #Test p Schriftfarbe blau
nur schreibe

p Schriftfarbe Rot
#Test Schriftfarbe blau

Und als HTML-Code

p Dies ist ein Testtext /p
id=„test“ p Dies ist ein anderer Testtext /p

ist alles rot, und das, obwohl ich der id doch blau als Schriftfarbe zugewiesen habe. Dasselbe Spielchen auch mit dem div-Tag.

Und genau das verstehe ich jetzt nicht. Das P ist doch das Kind der id bzw. des div`s.
Wo liegt mein Denkfehler?

GLG
Tichuspieler

#2

Hallo,

HTML-Code 1:

p Dies ist ein Testtext /p

Soll das
Dies ist ein Testtext
heißen?

Und

id=„test“ p Dies ist ein anderer Testtext /p

soll was sein? Gehört die id zum Paragraph? Also:
Dies ist ein anderer Testtext ?

Da würde aber das Ergebnis nicht passen

Ergebnis= alles in blau
(klar, weil die id eine höhere Spezifität hat)

Die Frage zieht sich weiter…

HTML-Code 2

p Dies ist ein Testtext
div id=„test“ p Dies ist ein anderer Testtext /p /div

Ergebnis: erste Zeile rot, zweite blau

Wenn ich nun aber das CSS verändere und statt des #Test p
Schriftfarbe blau
nur schreibe

p Schriftfarbe Rot
#Test Schriftfarbe blau

p {
font-color: red;
}
#Test {
font-color: blue;
}

Und als HTML-Code

p Dies ist ein Testtext /p
id=„test“ p Dies ist ein anderer Testtext /p

Dies ist ein Testtext
Dies ist ein anderer Testtext

So?
Dann ist

ist alles rot, und das, obwohl ich der id doch blau als
Schriftfarbe zugewiesen habe. Dasselbe Spielchen auch mit dem
div-Tag.

völlig richtig. Du weist allen Zeichen innerhalb des div die Schriftfarbe Blau zu. Der Schrift im Paragraph weist Du allerdings die Farbe Rot zu.
Aber vielleicht habe ich Deinen unvollständigen Code ja falsch interpretiert.

Gruß

osmodius

#3

Hallo osmodius!

Danke für Deine Antwort

Hallo,

HTML-Code 1:

p Dies ist ein Testtext /p

Soll das
Dies ist ein Testtext
heißen?

nein dies ist ein Testtext

Und

id=„test“ p Dies ist ein anderer Testtext /p

soll was sein? Gehört die id zum Paragraph? Also:
Dies ist ein anderer Testtext ?

Da würde aber das Ergebnis nicht passen

Ergebnis= alles in blau
(klar, weil die id eine höhere Spezifität hat)

Ich habe es - ohne das prehtml - ausprobiert, und da klappte es mit alles in blau.

Wenn ich nun aber das CSS verändere und statt des #Test p
Schriftfarbe blau
nur schreibe

p Schriftfarbe Rot
#Test Schriftfarbe blau

p {
font-color: red;
}
#Test {
font-color: blue;
}

Und als HTML-Code

p Dies ist ein Testtext /p
id=„test“ p Dies ist ein anderer Testtext /p

Dies ist ein Testtext
Dies ist ein anderer Testtext

So?

Ja, nur ohne das prehtml

Dann ist

ist alles rot, und das, obwohl ich der id doch blau als
Schriftfarbe zugewiesen habe. Dasselbe Spielchen auch mit dem
div-Tag.

völlig richtig. Du weist allen Zeichen innerhalb des div die
Schriftfarbe Blau zu. Der Schrift im Paragraph weist Du
allerdings die Farbe Rot zu.

Es ist richtig, dass ich dem Paragraph die Schriftfarbe rot zugewiesen habe.

Darum hat er ja auch bei Dies ist ein Texttest > den Satz in Rot ausgegeben.
Aber ich habe ja bei div gesagt: Schriftfarbe blau. Und da Paragraph ja IM div steckt und somit ein Kind von div ist, müsste er ja laut der Vererbung ebenfalls blau sein. So zumindest verstehe ich das mit der Vererbung.
Warum also wird die Schrift rot?
Was verstehe ich an der Vererbung falsch?

GLG
Tichuspieler

#4

Hi,

Warum also wird die Schrift rot?
Was verstehe ich an der Vererbung falsch?

zugegeben ist die Spezifikation http://www.w3.org/TR/CSS21/selector.html#descendant-… hier ungenau, denn die Vererbung wirkt sich nicht auf alle Eigenschaften aus und auch nur, wenn für nachfolgende Elemente nichts anderes definiert ist. Deine allgemeine Definition für p hat also Vorrang, solange Du diesen nicht beseitigst.

Gruß
Ingo

#5

An die Profis: Bitte nochmal drüber schauen, dass
ich nichts Verkehrtes schreibe.

Hallo!
Ich glaube zu wissen, wo Ihr Denkfehler liegt.
Zuerstmal: Sie haben recht, dass das ein Kindelement von ist und dem zur folge blau dargestellt werden müsste.
Warum nun schreibt er aber in Rot.

Der Browser liest zuerst, dass Text in in roter Farbe angegeben werden soll und dann, dass alles, was in einem steht, in blau angegeben werden soll, und somit auch der Text in .
Jetzt steht er vor einem Problem: Soll der Text nun in Rot oder in Blau dort stehen? Er steht also vor sogenannten konkurrierenden Anweisungen.
Darum greift er nach der Lösung: Es gilt die Anweisung, die genauer formuliert ist. Und das wäre in diesem Fall p {color:red;}, weil hier der Paragraph direkt angesprochen wird. Diese Anweisung hätte nach der Spezifitättabelle (oder wie das Tier heißt) einen Punkt (Tag = 1 Punkt, class = 10 Punkte, id = 100 Punkte, Instyle = 1000 Punkte. Das heißt, je nachdem, was man verwendet, desto mehr Gewicht hat die Anweisung).

Vielleicht sagen Sie jetzt:„Aber wieso wird es denn rot, schließlich müsste das im auch einen Punkt haben“.
Nein, weil nur das Element VOR der geschweiften Klammer gilt, und da steht ja kein weiteres p.
Anders sieht es aus, wenn Sie schreiben würden; div p {color:blue}. Dann hat man zwei Punkte (die beiden Tags werden nämlich addiert} und jeglicher Text, der in einem steht, wird blau gefärbt.

Vielleicht hilft das weiter.
Lieben Gruß
Michael Vogl

Es ist richtig, dass ich dem Paragraph die Schriftfarbe rot
zugewiesen habe.

Darum hat er ja auch bei Dies ist ein Texttest > den
Satz in Rot ausgegeben.
Aber ich habe ja bei div gesagt: Schriftfarbe blau. Und da
Paragraph ja IM div steckt und somit ein Kind von div ist,
müsste er ja laut der Vererbung ebenfalls blau sein. So
zumindest verstehe ich das mit der Vererbung.
Warum also wird die Schrift rot?
Was verstehe ich an der Vererbung falsch?

r

#6

Moin,

Ja, nur ohne das prehtml

Das prehtml-Tag ist kein HTML-Tag, sondern ein Forum-eigenes Tag, das man um den HTML-Code schreibt, damit dieser nicht vom Forum interpretiert wird und außerdem anders dargestellt wird. Sehen kannst Du das Tag außerdem nur beim Zitieren eines Artikels, wenn Du den Beitrag selbst liest, wirst Du sehen, dass das Tag da nicht sichtbar ist.

Dies ist ein Testtext
Dies ist ein anderer Testtext

Es ist richtig, dass ich dem Paragraph die Schriftfarbe rot
zugewiesen habe.

Darum hat er ja auch bei Dies ist ein Texttest > den
Satz in Rot ausgegeben.
Aber ich habe ja bei div gesagt: Schriftfarbe blau. Und da
Paragraph ja IM div steckt und somit ein Kind von div ist,
müsste er ja laut der Vererbung ebenfalls blau sein.

Wie könntest Du dann dem Absatz im div anders färben, wenn die Reihenfolge, wie Du sie forderst, gelten würde?

Vererbt wird ja nur, wenn für die Kinder nicht speziell etwas anderes angegeben ist. Erst die Vererbung, dann die speziellen Regeln.

Gruß,
-Efchen

#7

Heiho!

Ich danke euch für die Antworten. Ich merke, ich muss noch viel lernen.

GLG

Tichuspieler