CSS wählt das erste untergeordnete Element unter dem übergeordneten Element aus (:first-child)
|
Vorwort Ich habe vor Kurzem :first-child in einem Projekt verwendet und es fiel mir sofort ein, ja. Ist das nicht einfach die Auswahl des ersten Elements? Es scheint sehr nützlich zu sein und ich habe bei der täglichen Verwendung keine Probleme. Ich denke natürlich, dass es nur das erste Element unter dem übergeordneten Element auswählt und keine Auswirkungen auf Enkel- und Urenkelelemente hat. Es stellte sich heraus, dass ich falsch lag. Das erste Missverständnis von E:first-child (es wird nur einer der von mir angegebenen Bereiche ausgewählt und nicht durchlaufen, wie viele Enkel- oder Urenkelelemente es gibt)
<!DOCTYPE html>
<html>
<Kopf>
<Stil>
Körper p: erstes Kind
{
Hintergrundfarbe: gelb;
}
</Stil>
</Kopf>
<Text>
<p>Dieser Absatz ist das erste untergeordnete Element seines übergeordneten Elements (Textkörper). </p>
<h1>Willkommen auf meiner Homepage</h1>
<p>Dieser Absatz ist nicht das erste untergeordnete Element seines übergeordneten Absatzes. </p>
<div>
<p>Dieser Absatz ist das erste untergeordnete Element seines übergeordneten Elements (div). </p>
<p>Dieser Absatz ist nicht das erste untergeordnete Element seines übergeordneten Absatzes. </p>
</div>
<p><b>Hinweis:</b> Für :first-child in IE8 und früheren Browsern ist die <!DOCTYPE>-Deklaration erforderlich. </p>
</body>
</html>Funktioniert der obige Code wirklich nur mit einem p-Tag?
Dies ist das erste häufige Missverständnis, das wir gemacht haben, als wir dachten, dass body p:first-child das erste Element auswählt. Tatsächlich wird dieses p ausgewählt, solange es das erste in seinem übergeordneten Element im von uns ausgewählten Textkörper ist. Das zweite Missverständnis von E: erstes Kind (egal wie viele Brüder vor diesem E-Element stehen, solange ich das erste E-Element bin, werde ich wirksam)
Es handelt sich immer noch um den obigen Code, aber wir haben vor dem p-Tag im Textkörper ein Font-Tag hinzugefügt und festgestellt, dass p ungültig ist. :first-child ist ein Selektor, der das erste untergeordnete Element seines übergeordneten Elements auswählt. Wie wähle ich nur die Unterelemente eines bestimmten Elements aus? Ganz zu schweigen davon, wie viele Enkel und Urenkel Sie haben. Untergeordneter Selektor (>): kann nur Elemente auswählen, die untergeordnete Elemente eines bestimmten Elements sind (direkte untergeordnete Elemente), ausgenommen Enkel, Urenkel usw. Nehmen Sie den obigen Code als Beispiel und fügen Sie > hinzu, um den Effekt auszuprobieren
Manchmal wird der falsche Selektor verwendet, ohne dass ein Fehler gemeldet wird. Aber falsch ist falsch. Es wird immer eine Zeit geben, die es zu entdecken gilt. Dies ist das Ende dieses Artikels über die Auswahl des ersten untergeordneten Elements unter dem übergeordneten Element (:first-child) durch CSS. Weitere relevante CSS-Elemente für das erste untergeordnete Element unter dem übergeordneten Element finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: SASS Style Programmierhandbuch für CSS
>>: Beispielcode zum Setzen von Hotlinks und Koordinatenwerten für Webbilder
Artikel empfehlen
Redission-Tomcat implementiert schnell die Bereitstellung von einer einzelnen Maschine zur Bereitstellung auf mehreren Maschinen
Vorwort In den Anfangsphasen einiger Projekte wer...
Analysieren Sie das Problem der automatischen Erkennung und Lese-/Schreibüberwachung von Zabbix 5.0-Festplatten
Datenträger automatisch erkennen Konfigurationssc...
Beispielcode zur Implementierung des Neuner-Raster-Layouts dynamischer Bilder mit CSS
Voraussetzung: content="width=750" <...
So erstellen (CREATE PROCEDURE) und rufen (CALL) Sie eine gespeicherte MySQL-Prozedur auf und so erstellen (DECLARE) und weisen (SET) Sie eine Variable zu
Dieser Artikel beschreibt anhand von Beispielen, ...
MySQL Master-Slave-Prinzip und Konfigurationsdetails
MySQL Master-Slave-Konfiguration und Prinzip, zu ...
Entwurf und Implementierung eines Supermarkt-Warenwirtschaftssystems auf Basis von Mysql+JavaSwing
Inhaltsverzeichnis 1. Funktionseinführung 2. Schl...
SQL-Anweisungen in MySQL verwenden keine Indizes
MySQL-Abfrage ohne Verwendung der Indexaggregatio...
Zusammenfassung der vier Klick-Antwortmethoden von Button
Button wird ziemlich oft verwendet. Hier habe ich...
Zusammenfassung der Probleme mit der Mysql-connector-java-Treiberversion
Problem mit der Mysql-Connector-Java-Treiberversi...
So erstellen Sie eine MySQL-Datenbank und unterstützen chinesische Schriftzeichen
Schauen wir uns zunächst die offizielle MySQL-Dok...
Erweiterter Crawler - Verwendung der Scrapy_splash-Komponente für automatisches JS-Rendering
Inhaltsverzeichnis 1. Was ist scrapy_splash? 2. D...
MySQL-Zeittypauswahl
Inhaltsverzeichnis DATETIME ZEITSTEMPEL Wie man w...
So verstehen Sie die JS-Funktion Anti-Shake und Funktionsdrosselung
Inhaltsverzeichnis Überblick 1. Funktion Entprell...
CentOS 7: Beispielcode zum Festlegen des Grub-Passworts und zur Einzelbenutzeranmeldung
Es gibt erhebliche Unterschiede zwischen CentOS7 ...
Best Practices zum Teilen von React-Code
Wenn ein Projekt eine gewisse Komplexität erreich...