CSS-Sibling-Selektoren verstehen: Ein Leitfaden für Anfänger

CSS bietet eine breite Palette von Selektoren für die gezielte Ausrichtung auf bestimmte Elemente in einem HTML-Dokument. Obwohl Klassen- und ID-Selektoren häufig verwendet werden, können sie nicht immer auf Elemente basierend auf ihrer Beziehung zu anderen Elementen abzielen. Hier kommen CSS-Geschwisterselektoren ins Spiel.

CSS-Geschwisterselektoren sind für die Erstellung anspruchsvoller und flexibler Weblayouts von entscheidender Bedeutung, da sie es Ihnen ermöglichen, Elemente basierend auf ihrer relativen Position zu anderen Elementen zu formatieren. Sie sind besonders nützlich, wenn das Design von der Elementplatzierung abhängt und verschiedene Kombinatoren verwendet, z. B. Descendant Combinator, Child Combinator, Adjacent Sibling Combinator und mehr. Mit diesem Ansatz können Sie Stile auf bestimmte Elemente anwenden, ohne zusätzliche Klassen oder IDs hinzuzufügen, wodurch die Code-Unordnung verringert wird.

Was sind CSS-Geschwisterselektoren?

CSS-Geschwisterselektoren werden verwendet, um Elemente auszuwählen, die Geschwister sind (dasselbe übergeordnete Element teilen), d. h. sie helfen Ihnen bei der Auswahl von HTML-Elementen basierend auf ihrer Beziehung zu anderen Elementen, die dasselbe übergeordnete Element teilen. Diese Kombinatoren sind einzigartige Symbole, die Browsern helfen, die Beziehung zwischen HTML-Elementen zu verstehen.

Es gibt zwei Arten von CSS-Geschwisterselektoren:

• Angrenzende Geschwisterauswahl ( )

• Allgemeine Geschwisterauswahl (-)

Aus diesem Grund sind CSS-Geschwisterselektoren für Webentwickler von entscheidender Bedeutung:

• Erweiterte Spezifität: Im Vergleich zu generischen Selektoren ermöglichen Geschwisterselektoren eine präzisere Gestaltung von Elementen. Dies verbessert die Wartbarkeit und Organisation Ihres CSS-Codes.

• Dynamische Layouts: Indem Sie sich auf die Positionen von Elementen relativ zu ihren Geschwistern konzentrieren, können Sie Layouts entwickeln, die sich an die Inhaltsstruktur anpassen. Stellen Sie sich vor, das erste und letzte untergeordnete Element eines Containers unterschiedlich zu gestalten.

• Visuelle Beziehungen: Damit können Sie visuelle Beziehungen zwischen Elementen erstellen. Denken Sie darüber nach, Bildunterschriften gefolgt von entsprechenden Bildern hervorzuheben oder Ränder zwischen benachbarten Abschnitten hinzuzufügen.

• Reduzierte Codewiederholung: Wenn Sie Elemente abhängig von ihrer Position innerhalb eines bestimmten Containers formatieren müssen, können Geschwisterselektoren die Notwendigkeit sich wiederholender Klassenzuweisungen überflüssig machen, was zu saubererem Code führt.

• Effizienz: Es kann zu einem effizienteren CSS führen, indem die Redundanz minimiert wird. Anstatt viele Regeln zu schreiben, um bestimmte Elemente unter unterschiedlichen Bedingungen anzusprechen, können Sie mit Geschwisterselektoren einfache, wiederverwendbare CSS-Regeln schreiben, die sich an die Dokumentstruktur anpassen.

• Responsive Design: Es kann beim responsiven Webdesign äußerst praktisch sein. Sie ermöglichen es Ihnen, das Layout oder Aussehen von Elementen basierend auf ihrer Beziehung zu anderen anzupassen, was für die Bereitstellung einer konsistenten Benutzererfahrung auf mehreren Geräten und Bildschirmgrößen von entscheidender Bedeutung ist.

CSS-Geschwisterselektoren ermöglichen es Ihnen, über einen rein elementbasierten Ansatz beim Styling hinauszugehen. Sie ermöglichen es Ihnen, die hierarchische Struktur des HTML zu nutzen, um ein konsistenteres und optisch ansprechenderes Benutzererlebnis zu schaffen.

Arten von CSS-Geschwisterselektoren

Es gibt zwei Arten von CSS-Geschwisterselektoren: benachbarte und allgemeine Selektoren. Beide sind wichtig, damit Entwickler Elemente basierend auf ihren Geschwisterbeziehungen gezielt ansprechen können, aber sie funktionieren unterschiedlich.

Das obige Diagramm zeigt die Geschwisterselektoren in CSS und wie sie auf Elemente abzielen.

Auswahl für benachbarte Geschwister ( )

Mit dem benachbarten Geschwisterselektor, dargestellt durch ein Pluszeichen ( ), können Sie ein Element direkt nach einem anderen Element mit demselben übergeordneten Element als Ziel auswählen. Dies bedeutet, dass es nur auf das erste gleichgeordnete Element abzielt, das direkt nach dem angegebenen Element erscheint, was ein präzises und kontextsensitives Styling ohne zusätzliche Klassen oder IDs ermöglicht.

Dieser Selektor bietet ein hohes Maß an Präzision und ermöglicht es Ihnen, Elemente basierend auf ihrer genauen Position innerhalb der HTML-Struktur zu formatieren.

Syntax:

    element1 + element2 {
      /* CSS styles */
    }

In dieser Syntax:

• element1: Stellt das Element dar, das dem Zielelement vorangeht.

• element2: Stellt das Element dar, das Sie formatieren möchten, das direkt auf Element1 folgen muss.

• Pluszeichen ( ): Fungiert als Kombinator und zeigt die spezifische Beziehung zwischen den Elementen an.

Verwendungen:

Wie bereits erwähnt, zielt dieser Selektor auf ein Element ab, das unmittelbar auf ein anderes angegebenes Element folgt. Dies ist nützlich, wenn Sie ein Element basierend auf seinem direkten Geschwister formatieren.

• Formularelemente gestalten: Wenn sich ein Benutzer auf ein Eingabefeld konzentriert, möchten Sie möglicherweise die Beschriftung hervorheben, die direkt darauf folgt.

    input:focus + label {
      color: blue;
    }

• Inhaltsformatierung: Sie können eine spezielle Formatierung auf einen Absatz anwenden, der auf eine Überschrift folgt.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Beispiel: LambdaTest-Blogseite

Betrachten wir ein Beispiel von der LambdaTest-Blogseite, um die Verwendung des benachbarten Geschwisterselektors zu zeigen.

Lassen Sie uns verschiedene Fälle aufschlüsseln, in denen der benachbarte Geschwisterselektor verwendet wurde:

    element1 + element2 {
      /* CSS styles */
    }

Dies zielt auf das Listenelement (

) ab, das unmittelbar nach dem Element mit der Klasse .platform positioniert ist. Im Navigationsmenü positioniert diese Regel das Element mit der Klasse .enterprise (die direkt nach .platform steht), um es mit position: relative zu formatieren. Dadurch kann das Dropdown-Menü innerhalb des Elements .enterprise mithilfe der absoluten Positionierung positioniert werden.

    input:focus + label {
      color: blue;
    }

Dies zielt auf das Schaltflächenelement ab, das unmittelbar nach der Schaltfläche mit der Klasse .login positioniert ist. Es legt die Stile (Abstand, Rahmen usw.) speziell für die zweite Schaltfläche fest und erzeugt so eine andere visuelle Unterscheidung zwischen der Anmeldung und der folgenden Schaltfläche.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Dies zielt auf das Sucheingabecontainerelement ab, das unmittelbar nach dem Element mit der Klasse .button-container positioniert ist. Es legt die Stile des Sucheingabecontainers fest (Breite, Positionierung usw.).

    .platform + li {
        position: relative;
    }

Dies ist ein etwas anderer Anwendungsfall. Hier zielt der benachbarte Geschwisterselektor auf das Element .search-icon *, jedoch nur, wenn das Element *.search-input den Fokus hat (wenn der Benutzer in die Suchleiste klickt). Auf diese Weise können Sie die Farbe und Größe des Symbols ändern, um dem Benutzer visuelles Feedback zu geben, wenn er mit der Sucheingabe interagiert.

Allgemeine Geschwisterauswahl (~)

Mit der allgemeinen Geschwisterauswahl, dargestellt durch das Tilde-Symbol (~), können Sie Elemente ansprechen und formatieren, die dasselbe übergeordnete Element haben und einem bestimmten Element folgen. Im Gegensatz zum benachbarten Geschwisterselektor, der nur auf das unmittelbare Geschwisterpaar abzielt, wirkt sich der allgemeine Geschwisterselektor auf alle nachfolgenden Geschwister aus.

Syntax:

Die Syntax für den allgemeinen Geschwisterselektor lautet:

    .login + button {
        padding: 12px 15px;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #eee;
    }

In dieser Syntax:

• **element1: **Stellt das Referenzelement dar.

• element2: Stellt das Zielelement dar, das Element1 folgt und dasselbe übergeordnete Element hat.

Der allgemeine Geschwisterselektor ist praktisch, wenn Sie Komponenten formatieren, die sich auf die HTML-Struktur beziehen, aber nicht unbedingt nebeneinander liegen. Sie können damit beispielsweise alle Absätze formatieren, die auf ein

HTML-Tag-Element folgen, auch wenn sich andere Elemente dazwischen befinden.

Verwendungen:

Der allgemeine Geschwisterselektor zielt auf alle Geschwister eines bestimmten Elements ab, die dasselbe übergeordnete Element haben, unabhängig von ihrer Position.

• Navigationslinks: Verwenden Sie die allgemeine Geschwisterauswahl, um alle Navigationslinks zu formatieren, die einem hervorgehobenen Link folgen.

    element1 + element2 {
      /* CSS styles */
    }

• Styling-Listen: Wenn Sie alle Listenelemente nach einem bestimmten formatieren möchten, verwenden Sie die allgemeine Geschwisterauswahl.

    input:focus + label {
      color: blue;
    }

• Abschnitte thematisch gestalten: Wenden Sie einen anderen Stil auf alle Abschnitte an, die auf einen bestimmten Abschnitt innerhalb desselben übergeordneten Abschnitts in einem Dokument folgen.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Beispiel: LambdaTest-Dokumentenseite

Im Beispiel der LambdaTest-Dokumentenseite formatiert der allgemeine Geschwisterselektor alle -Elemente, die auf ein .docs-title-Div im Abschnitt .docs-category folgen . Dieser Ansatz hilft dabei, die Links von anderen Inhalten zu unterscheiden und sorgt für ein strukturiertes Layout. Dadurch wird sichergestellt, dass alle zugehörigen Links visuell gruppiert und einheitlich gestaltet sind, sodass ein klares und organisiertes Design erhalten bleibt.

Im obigen Beispiel zielt die CSS-Regel .docs-title ~ a * auf alle *anchor ()-Elemente ab, die nach einem .docs-title div stehen. Zu den verwendeten Stilen gehören eine Blockanzeige, ein Abstandsrand sowie eine bestimmte Textfarbe, -größe und -stärke.

Das Verständnis dieser beiden Geschwisterselektoren ermöglicht eine gezieltere und dynamischere Gestaltung Ihrer Webseiten. Sind CSS-Geschwisterselektoren jedoch mit allen Browsern kompatibel?

Browserkompatibilität

CSS-Geschwisterselektoren mit Kombinatoren werden von modernen Browsern, einschließlich Chrome, Firefox, Safari und Edge, weitgehend unterstützt. Es empfiehlt sich jedoch weiterhin, die Kompatibilität mit älteren Browserversionen zu überprüfen und Ihre Website auf verschiedenen Browsern zu testen, um ein konsistentes Verhalten sicherzustellen.

Um die Stile Ihrer Website in verschiedenen Browsern zu testen und sicherzustellen, dass alles wie erwartet funktioniert, sollten Sie die Verwendung einer cloudbasierten Plattform wie LambdaTest in Betracht ziehen. Es handelt sich um eine KI-gestützte Testausführungsplattform, mit der Sie manuelle und automatisierte Browserkompatibilitätstests im großen Maßstab für 3000 Browser- und Betriebssystemkombinationen durchführen können.

Best Practices und Überlegungen

Die Verwendung von CSS-Geschwisterselektoren kann Ihr Website-Design erheblich verbessern. Dennoch ist es wichtig, Best Practices zu befolgen und sich bestimmter Überlegungen bewusst zu sein, um sicherzustellen, dass Ihre CSS-Stylesheets effizient und wartbar bleiben.

Kombinieren Sie Selektoren für Spezifität

CSS-Geschwisterselektoren bieten eine geringere Spezifität als Klassen und IDs. Das heißt, wenn es eine widersprüchliche Stilregel mit höherer Spezifität gibt, hat die spezifischere Regel Vorrang. Achten Sie auf Konflikte und stellen Sie sicher, dass Ihre Geschwister-Selektorstile auf die richtigen Komponenten abzielen.

Geschwisterselektionen können mit anderen CSS-Selektoren kombiniert werden, um die Spezifität zu verbessern und Konflikte zu vermeiden. Dies kann verhindern, dass Stile in unerwünschten Fällen angewendet werden.

    element1 + element2 {
      /* CSS styles */
    }

Vermeiden Sie den übermäßigen Gebrauch von Geschwisterselektoren

Die übermäßige Verwendung von Geschwisterselektoren kann das Lesen und Verwalten von CSS erschweren. Versuchen Sie, Ihre Stylesheets zu vereinfachen und zu präzisieren, um sie verständlicher zu machen. Erwägen Sie die Verwendung von Klassen oder verschachtelten Elementen für anspruchsvollere Targeting-Szenarien.

    input:focus + label {
      color: blue;
    }

Beschränken Sie den Umfang der Selektoren

Vermeiden Sie die Verwendung zu breiter Selektoren, die unbeabsichtigt mehr Elemente als beabsichtigt formatieren könnten. Verwenden Sie beispielsweise .nav-item ~ .nav-item anstelle von div ~ div, um sicherzustellen, dass Sie nur auf die relevanten Elemente abzielen.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Stellen Sie Reaktionsfähigkeit und Kompatibilität sicher

Es ist wichtig sicherzustellen, dass Ihre Website attraktiv aussieht und auf allen Geräten und Browsern ordnungsgemäß funktioniert. Bei der Verwendung von CSS-Geschwisterselektoren in bestimmten Kontexten ist es wichtig, der Reaktionsfähigkeit und der breiten Kompatibilität Priorität einzuräumen.

Hier sind einige wichtige Überlegungen:

• **Medienabfrage: **Verwenden Sie Medienabfragen, um Ihre Stile basierend auf Bildschirmgrößen und Geräteausrichtung anzupassen. Dadurch wird sichergestellt, dass sich das Layout Ihrer Website an die optimale Anzeige auf Desktops, Laptops, Tablets und Smartphones anpasst. Um das responsive Design auf verschiedenen Geräten und Browsern zu validieren, verwenden Sie den von LambdaTest angebotenen LT-Browser. Mit diesem mobilen Website-Testtool können Sie Ihre Website auf 53 Geräteansichten testen und so eine konsistente und positive Benutzererfahrung auf verschiedenen Geräten gewährleisten.

Die folgende CSS-Medienabfrage zielt auf Stile für Bildschirme mit einer Breite von 992 Pixeln oder weniger ab, typischerweise einschließlich Tablets und Smartphones im Hochformat. Innerhalb dieser Medienabfrage können Sie unter anderem die Höhe des Körpers auf „Automatisch“ und die Höhe von .logo-container img auf 40 Pixel einstellen.

Der folgende Codeausschnitt ist ein Beispiel für eine Medienabfrage, die das Layout des Abschnitts „Blogbeiträge“ für Bildschirme mit einer Breite von 992 Pixeln oder kleiner anpasst. Es stellt .blog-image-text-container * so ein, dass es als flexibler Container mit einer Spaltenrichtung angezeigt wird, und passt seine Breite auf 100 % an. Die Bilder im *.blog-image-container *sind mit einer Breite von 100 % und einer Höhe von „Auto“ gestaltet. Darüber hinaus wird *.table-of-content *mit *display: none ausgeblendet.

Ergebnis:

Das obige Ergebnis wird im LT Browser angezeigt, um die Reaktionsfähigkeit Ihrer Websites auf Desktop-, Mobil- und Tablet-Geräten zu überprüfen.

Um LT Browser zu verwenden und die Reaktionsfähigkeit Ihrer Anwendung zu testen, klicken Sie einfach unten auf die Download-Schaltfläche.

Sehen Sie sich das Video unten an, um mehr über LT-Browser und die ersten Schritte zu erfahren.

• Browserkompatibilität: Testen Sie die Funktionalität und das Erscheinungsbild Ihrer Website in mehreren Browsern, um sicherzustellen, dass Ihre Stile und Layouts konsistent dargestellt werden. Browser interpretieren CSS-Code möglicherweise etwas anders, daher helfen Tests dabei, Inkonsistenzen zu erkennen und zu beheben. Wie oben erfahren, können Sie LambdaTest verwenden, um browserübergreifende Tests durchzuführen, um zu überprüfen, ob Ihre Websites von verschiedenen Browsern unterstützt werden und wie erwartet funktionieren.

Indem Sie Reaktionsfähigkeit und Kompatibilität priorisieren, können Sie eine Website erstellen, die allen Benutzern ein nahtloses Benutzererlebnis bietet, unabhängig von ihrem Gerät oder Browser.

Verwenden Sie Klassen zur Verdeutlichung

CSS-Geschwisterselektoren sind nützlich, um Elemente basierend auf ihrer Position in der HTML-Struktur anzusprechen. Ihre übermäßige Verwendung kann jedoch dazu führen, dass der Code weniger wartbar ist. Die Verwendung von Klassen kann die Lesbarkeit des Codes und die langfristige Wartbarkeit verbessern.

Stellen Sie sich ein Szenario vor, in dem Sie einen Geschwisterselektor verwenden wie:

    element1 + element2 {
      /* CSS styles */
    }

Dieser Code zielt sofort auf alle Elemente ab, die auf ein

-Element folgen. Stellen Sie sich eine Seite mit zahlreichen Abschnitten vor, die ein

und ein für eine Zusammenfassung enthalten.

Die Verwendung des CSS-Geschwisterselektors wird hier weniger klar. Was passiert, wenn Sie in bestimmten Abschnitten ein weiteres Element zwischen

und

* hinzufügen? Der CSS-Geschwisterselektor zielt möglicherweise nicht mehr auf das beabsichtigte *

ab für diese Abschnitte.

Mithilfe von Klassen können Sie die Beziehung zwischen Elementen angeben und so Ihren CSS-Code lesbar und wartbar machen. So geht's:

HTML:

    input:focus + label {
      color: blue;
    }

CSS:

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

In diesem Beispiel können Sie jetzt Klassen wie .article-section, .article-title, .article-summary usw. CSS-Stile einschließen Zielen Sie auf diese spezifischen Klassen, um den Code klarer und verständlicher zu machen. Die Verwendung von Klassen verbessert die Lesbarkeit, Wartbarkeit und Wiederverwendung des Codes.

Durch die Verwendung dieser Methode wird sichergestellt, dass Ihr CSS-Code auch dann gewartet werden kann, wenn Ihre Website wächst. Denken Sie daran, dass klarer und gut organisierter Code auf lange Sicht Zeit spart und die Zusammenarbeit mit anderen Entwicklern erleichtert.

Abschluss

Zusammenfassend lässt sich sagen, dass Geschwisterselektoren effektive CSS-Funktionen sind, die es Entwicklern ermöglichen, anspruchsvolle und dynamische Stile basierend auf Elementbeziehungen zu entwickeln. Dieser Blog konzentriert sich auf zwei Arten von Geschwisterselektoren: angrenzend ( ) und allgemein (~).

Um den Nutzen von Geschwisterselektoren zu demonstrieren, haben wir die Grundlagen besprochen, praktische Beispiele einbezogen und uns reale Anwendungen angesehen. Darüber hinaus haben wir den Schwerpunkt auf Best Practices und Überlegungen gelegt, um Ihr CSS effizient und verwaltbar zu halten.

Wenn Sie benachbarte und allgemeine Geschwisterselektoren verstehen und richtig verwenden, können Sie Ihre Webdesigns verbessern und anspruchsvollere, optisch ansprechendere Layouts entwickeln. Um die besten Ergebnisse zu erzielen, testen Sie Ihre Stile ordnungsgemäß und halten Sie Ihren Code sauber und gut organisiert.

Viel Spaß beim Programmieren!

Das obige ist der detaillierte Inhalt vonCSS-Sibling-Selektoren verstehen: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!