Funktioniert First-Child, ob der Typ bekannt oder unbekannt ist?
Ich habe gelesen. Gibt es einen CSS-Selektor nur für das erste direkte Kind? und Ссылка
Ich denke, ich muss den Effekt auf das erste Kind des <h1> -Tags anwenden, aber ich konnte es nicht zum Laufen bringen. Also versuche ich stattdessen nth-child zu verwenden, aber immer noch kein Glück.
CSS
%Vor%Wenn Sie die Geige öffnen, werden Sie feststellen, dass die Kopfzeile einen blauen Hintergrund hat und der Inhalt einen grauen Hintergrund hat. Ich versuche nur, eine weiße Linie einzufügen:
Aktuell:
Gewünscht (Weiß zwischen Blau und Grau beachten)
Bitte beachtet, ich weiß, dass das ziemlich trivial ist, wenn ich einfach ein neues div mit einer Klasse hinzufüge, oder sogar ein border-bottom:solid 5px white; zum <h1> -Tag hinzufüge, der Punkt ist, ich versuche etwas über CSS zu lernen Selektoren ist dies mit CSS-Selektoren möglich?
3 Antworten
:first-child kann mit oder ohne Kenntnis des Elementtyps verwendet werden.
Sie können parent > :first-child entweder für jedes erste untergeordnete Element oder für jeden Knotentyp verwenden, oder Sie können parent > p:first-child so einstellen, dass nur das erste untergeordnete Element übereinstimmt, wenn es sich um ein p -Tag handelt.
Sie können auch parent > p:first-of-type verwenden, um die erste p in parent zu finden, auch wenn es nicht das erste untergeordnete Element ist.
Um das Beispiel zu vervollständigen, versuchen Sie, Pseudoelemente zu verwenden:
-
Es ist möglich,
:nth-child(1)zu verwenden, um das erste Kind wie:first-childauszuwählen. Hinweis: In diesem Beispiel ist es sinnlos, da Sie nur ein<h1>pro<article>haben. -
section article h1erhältposition: relativeund es wirdposition: absoluteuntergeordnete Elemente werden relativ dazu positioniert. -
:afterwird mitposition: absoluteundwidth: 100%angegeben, um eine Zeile am unteren Rand Ihres<h1>Hintergrunds zu erstellen.
Denken Sie daran, dass die Pseudoelemente :after und :before das Äquivalent von:
CSS
%Vor% In Ihrem Beispiel versuchen Sie, das zweite untergeordnete Element von h1 auszuwählen, aber dieses Element hat keine untergeordneten Elemente und schlägt daher fehl. Sie müssen das zweite Kind von das Elternteil von h1
Das hat den Vorteil, dass Sie keinen Tag-Namen dort eingeben, also funktioniert es auch, wenn Sie zum Beispiel die h1 in eine h2 ändern.
Dieser letzte Selektor könnte auch in
Es ist nicht dasselbe , aber Sie können auch generierten Inhalt nach einem Element hinzufügen (und in Ihrem Fall ist es in Ordnung und funktioniert auf die gleiche Weise).
Oder wenn Sie etwas mit dem h1 abgleichen möchten, müssen Sie das nächste Geschwister mit dem Geschwisterselektor
Dieser Selektor wählt das erste Element (gleich welcher Art), das direkt nach einem h1 erscheint.
Oder fügen Sie generierten Inhalt nach dem Element hinzu, können Sie dies verwenden
%Vor%Was meiner Meinung nach am einfachsten ist
Tags und Links html css css-selectors