), dann wird der p:first-child-Stil nicht mehr angezeigt, da

Wird nicht mehr das erste untergeordnete Tag sein. In diesem Fall ist das erste untergeordnete Element h2.

Das Gleiche passiert mit der p:last-child-Regel – der CSS-Stil wird auf das Tag angewendet

Erst wenn er erscheint das letzte Kind seines Elternteils. Füge danach hinzu

Bei jedem anderen Tag eines anderen Typs werden Sie feststellen, dass die Regel „p:last-child“ nicht mehr gilt.

Die p:nth-child(3)-Regel funktioniert für dritte untergeordnetes Tag

(Dies wird durch die Zahl 3 in Klammern angezeigt). Die Schriftfarbe für diesen Absatz wird rot. Sie können die Zahl 3 ändern (z. B. in 2) und das Ergebnis sehen.

Die Regeln tr:nth-child(odd) und tr:nth-child(even) funktionieren für ungerade bzw. gerade tr-Elemente. Sie können das Ergebnis im Screenshot sehen, aber auch den gesamten Code kopieren und selbst mit den Stilen experimentieren.

Beispielverwendung: First-of-Type, :Last-of-Type, :nth-of-Type und :only-of-Type

/* CSS */ p:first-of-type ( Farbe: violett; Texttransformation: Großbuchstaben; ) p:last-of-type ( Schriftstil: kursiv; Schriftgröße: 0,8em; ) p:nth- of-type(3) ( Farbe: rot; ) p:nth-of-type(odd) ( Hintergrundfarbe: #A2DED0; ) p:nth-of-type(even) ( Hintergrundfarbe: #C8F7C5; ) h3:only-of-type ( text-decoration: underline; )
Screenshot: Anwenden von :first-of-type, :last-of-type, :nth-of-type und :only-of-type

Die erste CSS-Regel, die Sie sehen, ist p:first-of-type . Was tut es? Es wählt ein untergeordnetes Element vom Typ p aus, das Erste im Elternteil gefunden. Und es spielt keine Rolle, an welcher Stelle dieses Tag zwischen Elementen anderer Typen steht – erstes, zweites oder zehntes. Dies ist der Unterschied zwischen den Pseudoklassen:first-child und:first-of-type.

Die zweite Regel – p:last-of-type – wendet den Stil an der Letzte zu einem untergeordneten Element vom Typ p. Wie Sie dem HTML-Code entnehmen können, nach dem letzten Tag

Es gibt auch ein Etikett

, deren Vorhandensein keinen Einfluss auf die Ausführung der CSS-Regel hat (im Gegensatz zur Option with:last-of-child).

Die nächste Regel – p:nth-of-type(3) – ändert die Schriftfarbe in Rot. Dieser Stil wird auf das Tag angewendet

Welches ist dritte entsprechend einem Element seines Typs im übergeordneten Element. Im Screenshot können Sie sehen, dass die rote Farbe auf das Tag angewendet wird

Das ist tatsächlich das fünfte Kind des Tags

. Wenn wir jedoch Elemente anderer Typen nicht berücksichtigen, stellt sich heraus, dass das Tag

Mit roter Schrift liegt es an dritter Stelle (unter Tags dieser Art). So funktioniert diese Regel.

Die Regeln p:nth-of-type(even) und p:nth-of-type(odd) funktionieren ähnlich: Da der Name p vor dem Doppelpunkt angegeben wird, werden die geraden und ungeraden untergeordneten Elemente des Typs p ausgewählt und in gezeichnet gegebene Farben. Die restlichen Elemente werden übersprungen.

Die letzte Regel – h3:only-of-type – gilt für den Inhalt des Tags

, wodurch der Text unterstrichen wird. Dieser Stil funktioniert nur aufgrund des Tags

Ist der Einzige untergeordnetes Element seines Typs. Wenn Sie dem HTML-Code ein weiteres Tag hinzufügen

, wird der Stil nicht angewendet.

Schlussfolgerungen

Mit dem untergeordneten CSS-Selektor können Sie den Stil eines untergeordneten Elements eines HTML-Dokuments basierend auf dessen übergeordnetem Element ändern.

Mithilfe zusätzlicher Pseudoklassen: first-child, :last-child, :nth-child, :only-child können Sie die untergeordneten Elemente eines HTML-Dokuments formatieren und sich dabei auf ihre Position und Nummerierung im Elementbaum konzentrieren.

Mit Pseudoklassen: first-of-type, :last-of-type, :nth-of-type, :only-of-type können Sie den Stil auch auf untergeordnete Elemente eines HTML-Dokuments anwenden, basierend auf deren Typ als Nummerierung im Elementbaum.

Untergeordnete Elemente sind Elemente, die sich direkt innerhalb eines übergeordneten Elements befinden. Beachten Sie die Worte: direkt im Inneren.

Schauen wir uns ein Beispiel für einfachen HTML-Code an:

Der Absatz und darin fettig Element, und hier ist es geneigt Element.

Hier fettig Und unterstrichen und schräg Elemente.

Dieser Code besteht aus zwei Absätzen. In Absätzen gibt es Inline-Elemente , Und . Im zweiten Absatz das Tag in einem Tag verschachtelt .

Jetzt fügen wir diesem HTML-Code mithilfe untergeordneter Selektoren CSS-Stile hinzu.

Syntax für untergeordnete Selektoren:

Selektor 1 > Selektor 2 ( Eigenschaft: value; )

Hier ist der aktualisierte Code:

Der Absatz und darin fettig Element, und hier ist es geneigt Element.

Hier fettig Und unterstrichen und schräg Elemente.

Denken wir also daran: Ein untergeordnetes Element ist ein Element, das direkt im übergeordneten Element verschachtelt ist. Das heißt, ein untergeordnetes Element ist ein Nachkomme der ersten Ebene. Achten wir auf das Tag , im ersten Absatz ist es in einem Tag verschachtelt

Und im zweiten ist es in einem Tag verschachtelt , obwohl es auch ein untergeordnetes Element des Tags ist

Daher funktioniert im zweiten Absatz die CSS-Regel für den untergeordneten Selektor p>i (Farbe: Blau;) nicht – der kursive Text des zweiten Absatzes wird nicht in Blau angezeigt.

Abbildung 1. Beispiel Nr. 1 bei der Arbeit.

Gehen Sie zum HTML-Element Der zweite Absatz kann mit der CSS-Regel verwendet werden: p>u>i ( color : blue ; ).

Lassen Sie uns diese Regel verwenden, um den kursiven Text des zweiten Absatzes auf Gelb zu setzen.

Der Absatz und darin fettig Element, und hier ist es geneigt Element.

Hier fettig Und unterstrichen und schräg Elemente.

Dieser Stil funktioniert und der kursive Text im zweiten Absatz wird in Gelb angezeigt.

Abbildung 2. Beispiel Nr. 2 in Aktion.

Komplexeres Beispiel

Wir haben HTML-Code:

• Bearbeiten
  • Stornieren
  • Schneiden
  • Kopieren
  • Einfügen
• Schrift
  • Deutlich
  • Kursiv
  • Unterstrichen
• Größe
  • Klein
  • Normal
  • Durchschnitt
  • Groß

Standardmäßig wird es wie folgt interpretiert:

Aufgabe: wann CSS-Hilfe Verwandeln Sie diese Liste in ein horizontales Menü.

Abbildung 3. Ziel der Veränderung.

Hier ist eine Lösung für dieses Problem mit untergeordneten Selektoren:

• Bearbeiten
  • Stornieren
  • Schneiden
  • Kopieren
  • Einfügen
• Schrift
  • Deutlich
  • Kursiv
  • Unterstrichen
• Größe
  • Klein
  • Normal
  • Durchschnitt
  • Groß

Um dieses Beispiel besser zu verstehen, lesen Sie weiter.

Komplexe und umfangreiche Webanwendungen sind heutzutage alltäglich geworden. Browserübergreifende und benutzerfreundliche Bibliotheken wie jQuery mit ihrer umfangreichen Funktionalität können bei der spontanen Manipulation des DOM sehr hilfreich sein. Daher ist es nicht verwunderlich, dass viele Entwickler solche Bibliotheken häufiger verwenden, als mit der nativen DOM-API zu arbeiten, mit der es viele Probleme gab. Während Browserunterschiede immer noch ein Problem darstellen, ist das DOM heute in einem besseren Zustand als vor fünf bis sechs Jahren, als jQuery immer beliebter wurde.

In diesem Artikel demonstriere ich die HTML-Manipulationsmöglichkeiten des DOM und konzentriere mich dabei auf Eltern-, Kinder- und Nachbarbeziehungen. Abschließend werde ich Informationen zur Browserunterstützung für diese Funktionen geben. Bedenken Sie jedoch, dass eine Bibliothek wie jQuery aufgrund von Fehlern und Inkonsistenzen bei der Implementierung nativer Funktionen immer noch eine gute Option ist.

Untergeordnete Knoten zählen

Ich verwende für diese Demonstration das folgende HTML-Markup und wir werden es im Laufe des Artikels einige Male ändern:

• Beispiel eins
• Beispiel zwei
• Beispiel drei
• Beispiel vier
• Beispiel fünf
• Beispiel Sechs

Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

Wie Sie sehen, sind die Ergebnisse die gleichen, obwohl die verwendeten Techniken unterschiedlich sind. Im ersten Fall verwende ich die Kindereigenschaft. Dies ist eine schreibgeschützte Eigenschaft, sie gibt eine Sammlung zurück HTML-Elemente, befindet sich innerhalb des angeforderten Elements; Um ihre Anzahl zu zählen, verwende ich die Längeneigenschaft dieser Sammlung.

Im zweiten Beispiel verwende ich die Methode childElementCount, die meiner Meinung nach eine übersichtlichere und möglicherweise wartbarere Methode ist (besprechen Sie dies später ausführlicher, ich glaube nicht, dass Sie Probleme haben werden, zu verstehen, was sie tut).

Ich könnte versuchen, childNodes.length (anstelle von children.length) zu verwenden, aber schauen Sie sich das Ergebnis an:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

Es wird 13 zurückgegeben, da „childNodes“ eine Sammlung aller Knoten, einschließlich Leerzeichen, ist. Beachten Sie dies, wenn Sie sich für den Unterschied zwischen untergeordneten Knoten und untergeordneten Elementknoten interessieren.

Überprüfen der Existenz von untergeordneten Knoten

Um zu überprüfen, ob ein Element untergeordnete Knoten hat, kann ich die Methode hasChildNodes() verwenden. Die Methode gibt einen booleschen Wert zurück, der ihre Anwesenheit oder Abwesenheit angibt:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // WAHR

Ich weiß, dass meine Liste untergeordnete Knoten hat, aber ich kann den HTML-Code so ändern, dass keine vorhanden sind. Das Markup sieht jetzt so aus:

Und hier ist das Ergebnis der erneuten Ausführung von hasChildNodes():

Console.log(myList.hasChildNodes()); // WAHR

Die Methode gibt weiterhin true zurück. Obwohl die Liste keine Elemente enthält, enthält sie ein Leerzeichen, das ein gültiger Knotentyp ist. Diese Methode berücksichtigt alle Knoten, nicht nur Elementknoten. Damit hasChildNodes() false zurückgibt, müssen wir das Markup erneut ändern:

Und nun wird das erwartete Ergebnis in der Konsole angezeigt:

Console.log(myList.hasChildNodes()); // FALSCH

Wenn ich weiß, dass ich möglicherweise auf Leerzeichen stoße, überprüfe ich natürlich zuerst, ob untergeordnete Knoten vorhanden sind, und verwende dann die Eigenschaft „nodeType“, um festzustellen, ob sich darunter Elementknoten befinden.

Untergeordnete Elemente hinzufügen und entfernen

Es gibt Techniken, mit denen Sie Elemente zum DOM hinzufügen und daraus entfernen können. Die bekannteste davon basiert auf einer Kombination der Methoden createElement() und appendChild().

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

In diesem Fall erstelle ich

Verwenden der Methode createElement() und anschließendes Hinzufügen zu body . Es ist sehr einfach und Sie haben diese Technik wahrscheinlich schon einmal verwendet.

Aber anstatt ein speziell erstelltes Element einzufügen, kann ich auch appendChild() verwenden und einfach das vorhandene Element verschieben. Nehmen wir an, wir haben das folgende Markup:

• Beispiel eins
• Beispiel zwei
• Beispiel drei
• Beispiel vier
• Beispiel fünf
• Beispiel Sechs

Beispieltext

Ich kann den Speicherort der Liste mit dem folgenden Code ändern:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);

Das endgültige DOM sieht folgendermaßen aus:

Beispieltext

• Beispiel eins
• Beispiel zwei
• Beispiel drei
• Beispiel vier
• Beispiel fünf
• Beispiel Sechs

Beachten Sie, dass die gesamte Liste von ihrem Platz (über dem Absatz) entfernt und anschließend vor dem abschließenden Textkörper eingefügt wurde. Während die Methode appendChild() normalerweise zum Hinzufügen von mit createElement() erstellten Elementen verwendet wird, kann sie auch zum Verschieben vorhandener Elemente verwendet werden.

Mit „removeChild()“ kann ich ein untergeordnetes Element auch vollständig aus dem DOM entfernen. So löschen Sie unsere Liste aus dem vorherigen Beispiel:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);

Das Element wurde nun entfernt. Die Methode „removeChild()“ gibt das entfernte Element zurück, damit ich es speichern kann, falls ich es später benötige.

Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

Es gibt auch eine ChildNode.remove()-Methode, die der Spezifikation erst vor relativ kurzer Zeit hinzugefügt wurde:

Var myList = document.getElementById("myList"); myList.remove();

Diese Methode gibt das Remote-Objekt nicht zurück und funktioniert nicht im IE (nur Edge). Und beide Methoden entfernen Textknoten auf die gleiche Weise wie Elementknoten.

Untergeordnete Elemente ersetzen

Ich kann ein vorhandenes untergeordnetes Element durch ein neues ersetzen, unabhängig davon, ob dieses neue Element vorhanden ist oder ob ich es von Grund auf neu erstellt habe. Hier ist das Markup:

Beispieltext

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "Beispiel"; myDiv.appendChild(document.createTextNode("Neuer Elementtext")); document.body.replaceChild(myDiv, myPar);

Neuer Elementtext

Wie Sie sehen können, benötigt die Methode replaceChild() zwei Argumente: das neue Element und das alte Element, das es ersetzt.

Ich kann diese Methode auch verwenden, um ein vorhandenes Element zu verschieben. Schauen Sie sich den folgenden HTML-Code an:

Beispieltext 1

Beispieltext 2

Beispieltext 3

Ich kann den dritten Absatz durch den ersten Absatz ersetzen, indem ich den folgenden Code verwende:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Nun sieht das generierte DOM so aus:

Beispieltext 2

Beispieltext 1

Auswahl bestimmter Kinder

Es gibt einige verschiedene Wege Auswahl eines bestimmten Elements. Wie bereits gezeigt, kann ich mit der Children-Sammlung oder der childNodes-Eigenschaft beginnen. Aber schauen wir uns andere Optionen an:

Die Eigenschaften firstElementChild und lastElementChild tun genau das, was ihr Name vermuten lässt: Sie wählen das erste und letzte untergeordnete Element aus. Kehren wir zu unserem Markup zurück:

• Beispiel eins
• Beispiel zwei
• Beispiel drei
• Beispiel vier
• Beispiel fünf
• Beispiel Sechs

Ich kann das erste auswählen und letzte Elemente Verwenden dieser Eigenschaften:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // „Beispiel eins“ console.log(myList.lastElementChild.innerHTML); // „Beispiel sechs“

Ich kann auch die Eigenschaften previousElementSibling und nextElementSibling verwenden, wenn ich andere untergeordnete Elemente als das erste oder letzte auswählen möchte. Dies geschieht durch die Kombination der Eigenschaften firstElementChild und lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // „Beispiel zwei“ console.log(myList.lastElementChild. previousElementSibling.innerHTML); // „Beispiel fünf“

Es gibt auch ähnliche Eigenschaften firstChild , lastChild , previousSibling und nextSibling , aber sie berücksichtigen alle Arten von Knoten, nicht nur Elemente. Im Allgemeinen sind Eigenschaften, die nur Elementknoten berücksichtigen, nützlicher als solche, die alle Knoten auswählen.

Inhalte in das DOM einfügen

Ich habe bereits nach Möglichkeiten gesucht, Elemente in das DOM einzufügen. Kommen wir zu einem ähnlichen Thema und werfen einen Blick auf die neuen Funktionen zum Einfügen von Inhalten.

Erstens gibt es eine einfache insertBefore()-Methode, ähnlich wie replaceChild(), sie benötigt zwei Argumente und funktioniert sowohl mit neuen als auch mit vorhandenen Elementen. Hier ist das Markup:

• Beispiel eins
• Beispiel zwei
• Beispiel drei
• Beispiel vier
• Beispiel fünf
• Beispiel Sechs

Beispielabsatz

Beachten Sie den Absatz, den ich zuerst entfernen und dann vor der Liste einfügen werde, alles auf einen Schlag:

Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

Im resultierenden HTML-Code erscheint der Absatz vor der Liste und dies ist eine weitere Möglichkeit, das Element zu umbrechen.

Beispielabsatz

• Beispiel eins
• Beispiel zwei
• Beispiel drei
• Beispiel vier
• Beispiel fünf
• Beispiel Sechs

Wie replaceChild() benötigt insertBefore() zwei Argumente: das hinzuzufügende Element und das Element, vor dem wir es einfügen möchten.

Diese Methode ist einfach. Versuchen wir nun eine leistungsfähigere Einfügemethode: die Methode insertAdjacentHTML().

Hallo, liebe Leser! Um das Thema CSS-Selektoren fortzusetzen, möchte ich Sie darauf aufmerksam machen Beschreibung der untergeordneten und Kontextselektoren, sowie ihre vergleichende Analyse, weil sie der Anwendungslogik nach sehr ähnlich sind, obwohl sie einige Unterschiede aufweisen.

In meinen Veröffentlichungen habe ich mich ausführlich damit beschäftigt verschiedene Arten CSS-Selektoren: ; und auch . Übrigens im letzten Artikel, in dem wir darüber gesprochen haben verschiedene Typen Attributselektor habe ich ausführlich beschrieben, wie meine theoretischen Berechnungen sofort überprüft werden können, indem mithilfe des integrierten Attributselektors online Änderungen am HTML- und CSS-Code vorgenommen werden Google-Tool Chrom(). Solche Bearbeitungstools verfügen über die neuesten Modifikationen aller gängigen Browser, einschließlich des Firebug-Plugins für Firefox ().

Sie können das theoretische Material in diesem Beitrag auch studieren, indem Sie eine beliebige Seite einer beliebigen Website bearbeiten! Drücken Sie dazu einfach F12, wenn Sie es verwenden Google Chrome oder Mozilla Firefox(). Jetzt stelle ich den Inhalt des p-Tags vor, anhand dessen wir ihn als Beispiel untersuchen werden untergeordnete und kontextbezogene CSS-Selektoren:

Dieser Absatz enthält em und starke Formatierungs-Tags dass Text hervorgehoben wird deutlich Und Kursivschrift.

Mit dem oben beschriebenen Bearbeitungstool habe ich diesen Absatz direkt in diesen Artikel eingefügt, indem ich den entsprechenden Text auf der linken Seite des Bearbeitungsfensters eingegeben habe, wodurch der Text dieses Absatzes ganz oben auf der Seite erschien:

Dieses HTML-Konstrukt, . Dieser Absatz wird ein Testthema in der heutigen Veröffentlichung sein; anhand seines Beispiels werde ich zeigen, wie sich die Gestaltung seines Textes ändert, je nachdem, welche Selektoren – untergeordnete oder kontextbezogene – in der CSS-Regel verwendet werden.

Ein untergeordnetes Element ist ein Element, das sich direkt innerhalb seines übergeordneten Elements befindet.. Bevor ich direkt zum Thema übergehe, werde ich ein Bild bereitstellen, das die Hierarchie der Tags in widerspiegelt HTML-Dokument Am Beispiel des Absatzes, dessen Text oben angegeben ist und den wir heute analysieren werden:

Dieses Design wird auch als Elementbaum bezeichnet. Diese Abbildung zeigt deutlich die Verschachtelung von Containern, was auf hierarchische Beziehungen zwischen Tags schließen lässt. Das Absatz-Tag p ist ein untergeordnetes Element von . Gleichzeitig ist das starke Tag kein untergeordnetes Element des div, da es sich im p-Container befindet.

Untergeordneter CSS-Selektor

Ein untergeordneter Selektor in einem Elementbaum befindet sich immer direkt innerhalb des übergeordneten Elements. In diesem Fall würde die Syntax zum Schreiben eines CSS-Selektors wie folgt lauten:

Der Stil wird auf Selektor 2 angewendet, jedoch nur, wenn er ein untergeordnetes Element von Selektor 1 ist. Schauen wir uns das anhand des obigen Screenshots des Elementbaums genauer an. Wenn Sie beispielsweise der Syntax folgen, können Sie eine Regel wie diese festlegen:

P>em (Farbe: grün;)

Diese Regel wirkt sich auf das letzte Wort des Absatzes aus, das „kursiv“ geschrieben werden soll, da es das ist, was zwischen den öffnenden und schließenden em-Tags eingeschlossen ist. Das em-Tag ist ein untergeordnetes Element von p, da es direkt darin platziert ist. Daher wird der Inhaltstext, nämlich das Wort „kursiv“, grün gefärbt.

Das andere em-Tag ist jedoch kein direkter Nachkomme des p-Tags, da es Teil des starken Tags ist, wodurch der Teil „em und starke Formatierungs-Tags“ des Absatzes nicht eingefärbt wird.

Kontextueller CSS-Selektor

Es ist Zeit, es herauszufinden Was ist ein CSS-Kontextselektor?. Bei der Gestaltung einer bestimmten Seite einer Website werden Tags häufig ineinander verschachtelt. Damit Stile für solche Elemente korrekt funktionieren, werden Selektoren verwendet, die in einem bestimmten Kontext wirken, daher der Name.

Wenn sich der untergeordnete Selektor direkt innerhalb des übergeordneten Elements (der ersten Verschachtelungsebene) befinden muss, damit eine CSS-Regel angewendet werden kann, ist dies für den Kontextselektor völlig unwichtig und es kann jede Verschachtelungsebene angewendet werden, die Eigenschaften des Das Element wird weiterhin vom übergeordneten Element übertragen. Die Syntax ist diese:

Wie Sie sehen, besteht ein Kontextselektor aus einfachen Selektoren, die durch ein Leerzeichen getrennt sind. Für kontextbezogene Selektoren ist die Verwendung von zwei oder mehr verschachtelten Tags zulässig. Lassen Sie uns nun eine CSS-Regel für den zu testenden Absatz erstellen, den ich oben zitiert habe:

P em (Farbe: grün;)

Wie Sie sehen, wird nicht nur der Text eines Teils des Absatzinhalts, der direkt im em-Formatierungs-Tag eingeschlossen ist, also das Wort „kursiv“, grün gefärbt, sondern auch ein Textabschnitt eines anderen em-Tags , was ebenfalls Teil des Strong-Tags ist. Dies geschah, weil es eine Regel mit einem Kontextselektor gibt, bei dem die Verschachtelungsebene im Gegensatz zum untergeordneten Selektor keine Rolle spielt. Dies ist der grundlegende Unterschied zwischen einem untergeordneten Element und einem Kontextselektor.

Schauen wir uns ein weiteres Beispiel an, wie kontextbezogene und untergeordnete Selektoren mit unserem Absatz interagieren. Schreiben wir die folgenden CSS-Regeln für den untergeordneten und Kontextselektor:

Div em (Farbe: rot;) p> em (Farbe: grün;)

Danach nimmt unser Absatz folgenden Aufbau an:

Wie Sie sehen können, wird ein Textstück, das in em- und strong-Tags eingeschlossen ist, rot gefärbt, weil die Kontextauswahlregel für es gültig ist, d. h. das em-Tag ist in strong- und div-Containern eingeschlossen, und die Verschachtelungsebene ist wie bereits erwähnt , ist egal .

Es stellt sich die Frage: Warum ist das Wort „kursiv geschrieben“, das auch der Inhalt von em ist, grün gefärbt? Schließlich ist auch für ihn die Kontextauswahlregel relevant. Aber auch für diesen Abschnitt des Absatztextes gilt die Child-Selektor-Regel, da sie nicht im Widerspruch zur Bedingung steht, dass für einen Child-Selektor das Element direkt im p-Tag enthalten sein muss.

Tatsache ist, dass es in CSS ein Vorranggesetz für die unten liegenden CSS-Eigenschaften gibt. Das heißt, in diesem Fall befindet sich die untergeordnete Auswahlregel tiefer im Dokument als CSS-Stile, geschrieben für den Kontextselektor des div-Containers. Daher wurde das Wort „kursiv“ grün. Wenn Sie sie vertauschen, gilt die Regel „p>em (Farbe: grün;)“ nicht mehr und der Textabschnitt „kursiv“ wird rot angezeigt.

Etikett soll den Typ des aktuellen Dokuments anzeigen – DTD (Dokumenttypdefinition, Beschreibung des Dokumenttyps). Es ist notwendig, dass der Browser versteht, wie die aktuelle Webseite zu interpretieren ist, da es HTML in mehreren Versionen gibt und es auch XHTML (EXtensible HyperText) gibt Auszeichnungssprache, eine erweiterte Hypertext-Markup-Sprache), ähnlich wie HTML, unterscheidet sich jedoch in der Syntax.

Damit der Browser weiß, nach welchem ​​Standard er das aktuelle HTML-Dokument anzeigen soll, müssen Sie in der ersten Codezeile festlegen .

Syntax

Beispiel: Ankündigung

Es gibt verschiedene Arten von DOCTYPE. Es gibt strenge Typen ( strikt), die nur auf der Grundlage bestimmter Tags funktionieren, es gibt Übergangs-Tags ( Übergang), die die Möglichkeit bieten, zusätzliche Tags einzufügen, es gibt solche, die mit Frames arbeiten ( Rahmenset).

In HTML 4.01 bezieht sich Doctype auf eine Dokumenttypdefinition (eine DTD beschreibt das Dokumentschema für eine bestimmte Auszeichnungssprache durch eine Reihe von Deklarationen), die auf SGML basiert. Es gibt 3 verschiedene Typen doctype in der HTML-Version 4.01.

HTML5-DOCTYPE-Regeln sind universell und enthalten Regeln vorherige Version sowie die Möglichkeit, mit HTML 4-Tags und in gewissem Umfang auch mit XHTML zu arbeiten und die Fähigkeiten aller seiner Vorgänger zu kombinieren und sie an die Arbeit in neuen Browsern anzupassen.

HTML 4.01 streng (HTML 4.01 streng)

Dieser DTD-Typ umfasst alle HTML-Elemente und -Attribute, mit Ausnahme visueller (Design) oder veralteter Elemente (z. B. Schriftart). Die Verwendung von Rahmen ist untersagt.

HTML 4.01 Übergangsversion (HTML 4.01 Übergangsversion)

Dieser DTD-Typ umfasst alle HTML-Elemente und -Attribute, einschließlich visueller (Design) und veralteter Elemente (z. B. Schriftart). Die Verwendung von Rahmen ist untersagt.

HTML 4.01-Frameset (HTML 4.01-Frame)

Wie HTML 4.01 Transitional, erlaubt jedoch Frames.

XHTML 1.0 streng (XHTML 1.0 streng)

Dieser DTD-Typ umfasst alle HTML-Elemente und -Attribute, mit Ausnahme visueller (Design) oder veralteter Elemente (z. B. Schriftart). Die Verwendung von Rahmen ist untersagt. Das Markup sollte als gut formatiertes XML geschrieben sein.

XHTML 1.0 Übergangsversion (XHTML 1.0 Übergangsversion)

Dieser DTD-Typ umfasst alle HTML-Elemente und -Attribute, einschließlich visueller (Design) und veralteter Elemente (z. B. Schriftart). Die Verwendung von Rahmen ist untersagt. Das Markup sollte als gut formatiertes XML geschrieben sein.

XHTML 1.0-Frameset (XHTML 1.0-Frame)

Ähnlich wie XHTML 1.0 Transitional, erlaubt jedoch Frames.

IN VERBINDUNG STEHENDE ARTIKEL