Detaillierte Erläuterung der HTML5-CSS3-Anwendungs-_HTML5-Tutorialfähigkeiten-H5-Tutorial-php.cn

-Element

Es gibt viele Möglichkeiten, das Element

zu finden, aber die einfachste Methode ist natürlich der Nachkommenselektor:

Code kopieren

Der Code lautet wie folgt:

Abschnitt Abschnitt Artikel {}

Positionierung der Elemente

Diese drei Elemente erscheinen jeweils an zwei Stellen, eines im

-Element, das andere im

-Element. Dieser Unterschied ermöglicht es uns, jedes Element leicht zu lokalisieren.

Code kopierenDer Code lautet wie folgt:

Artikelkopf {}
Artikelabschnitt {}
Artikelfußzeile {}

Oder gemeinsam definieren:

Code kopierenDer Code lautet wie folgt:

Abschnitt Abschnittsüberschrift {}
Abschnitt Abschnitt Abschnitt {}
Abschnitt Abschnitt Fußzeile {}

Bisher haben wir CSS2.1-Selektoren verwendet, um alle Klassen und IDs auszuschließen. Warum müssen wir also immer noch CSS3 verwenden? Ich freue mich, dass du gefragt hast...

Erweiterte Positionierung von HTML5-Elementen mit CSS3

Obwohl wir CSS2.1-Selektoren verwendet haben, um alle Klassen und IDs auszuschließen, gibt es offensichtlich viele komplexere Situationen, für deren Lösung erweiterte CSS3-Selektoren erforderlich sind. Lassen Sie uns anhand des folgenden Beispiels lernen, wie Sie CSS3 verwenden, um Seitenelemente zu positionieren, ohne nutzlose Klassen- und ID-Attribute zu verwenden.

Suchen Sie alle Beiträge mithilfe einer eindeutigen Beitrags-(Beitrags-)ID

Wordpress stellt uns für jeden Beitrag eine Quellcode-Ausgabe zur Verfügung, die die ID enthält. Diese Informationen werden normalerweise zur Navigation und/oder zum Verständnis der Absicht des Materials verwendet, aber CSS3 kann diese eindeutigen IDs verwenden, um diese Beiträge zu gestalten. Natürlich könnten Sie wie üblich das Attribut „class="post" zu jedem Beitrag hinzufügen, aber das würde den Zweck unserer Übung zunichte machen (und es würde auch keinen Spaß machen). Mit dem „Substring Match Selector“ können wir alle Protokolle und ihre verschiedenen Elemente finden, wie unten gezeigt.

Code kopierenDer Code lautet wie folgt:

article[id*=post-] {} /* Alle Protokolle suchen*/
article[id*=post-] header h1 {} /* Suchen alle Protokolle h1-Tag*/
article[id*=post-] section p {} /* Suchen Sie das p-Tag in allen Protokollen*/

Wir können Kommentarelemente und ihre untergeordneten Elemente weiterhin auf die gleiche Weise positionieren.

Code kopieren

Der Code lautet wie folgt:

Artikel[id*=Kommentar -] { } /* Alle Kommentare suchen*/
article[id*=comment-] header h1 {} /* h1-Tags in allen Kommentaren suchen*/
article[id*=comment-] Abschnitt p { } / * p-Tags in allen Kommentaren suchen*/

Suchen Sie nach bestimmten Abschnitten oder Artikeln

Es gibt viele Blogs mit einer großen Menge an Protokollen und Kommentaren, die aus

-Elementen bestehen. Um bestimmte

-Elemente zu finden, müssen wir uns an den leistungsstarken „:nth-child“-Selektor wenden:

Code kopieren

Der Code lautet wie folgt:

section:nth-child( 1) { } /* Wählen Sie den ersten */
article:nth-child(1) {} /* Wählen Sie den ersten

/* Wählen Sie den zweiten */
article:nth-child(2) {} /* Wählen Sie den zweiten

In ähnlicher Weise können wir den Selektor „:nth-last-child“ verwenden, um einige Elemente in umgekehrter Reihenfolge zu finden.

Code kopieren

Der Code lautet wie folgt:Abschnitt:nth-last- child(1 ) {} /* Wählen Sie den letzten */

article:nth-last-child(1) {} /* Wählen Sie den letzten

section:nth-last-child(2) {} /* Vorletztes auswählen

article:nth-last-child(2) {} /* Vorletztes auswählen */

Verwenden Sie mehr Möglichkeiten, bestimmte Elemente auszuwählen

Eine weitere Möglichkeit, bestimmte Elemente in HTML5 auszuwählen (z. B. Kopfzeile, Abschnitt und Fußzeile), besteht darin, den Selektor „:only-of-type“ zu nutzen. Da diese HTML5-Elemente an vielen Stellen oft mehr als einmal vorkommen, ist diese Methode praktisch, wenn wir ein Tag finden möchten, das nur einmal unter dem übergeordneten Element vorkommt. Wir möchten beispielsweise das einzige Element in einem bestimmten Element auswählen, beispielsweise den folgenden Code:

Code kopieren

Der Code lautet wie folgt:

Suchen Sie dieses Abschnittselement

section> und das section-Element

Wir können einfach den folgenden einzeiligen Selektor verwenden:

Code kopieren

Der Code lautet wie folgt:

Abschnitt>Abschnitt:nur- vom Typ {}

Auch hier können Sie hartnäckig jedem Element ein ID-Attribut hinzufügen, aber Sie verlieren die Skalierbarkeit, Wartbarkeit und absolute Einfachheit des Codes, wenn Sie die Struktur von der Präsentation entkoppeln. Mit CSS3 können wir fast alle Seitenelemente, die keine ID- und Klassenattribute haben, schnell und einfach finden.

Zusammenfassung Ich glaube, dass HTML5 und CSS3 mit der Zeit immer beliebter werden und unsere Web-Frontends noch besser machen werden. (Text/Onimusha)

Detaillierte Erläuterung der HTML5-CSS3-Anwendungs-_HTML5-Tutorialfähigkeiten

Div Soup Demonstration

Tangential Information

Div Suppenvorführung

Tangentiale Informationen

In Verbindung stehende Artikel