Beispielcode für einen Geschwisterselektor zum Implementieren vertikaler Ränder

Wie der Geschwisterselektor CSS lesbar halten und gleichzeitig komplexe Designanforderungen erfüllen kann

Dies ist eines der Beispiele im Web-Frontend-Entwicklungsprozess, der einfach beginnt und nach und nach komplizierter wird: das Konvertieren eines Artikel Vertikale Ränder (vertikale Ränders) sollten auf alle Elemente angewendet werden, z. B. auf Blog-Beiträge, die aus komplexem Markdown zusammengestellt wurden.

In den meisten Fällen muss man sich mit vielen Ausnahmen und Zusammenhängen auseinandersetzen, wie zum Beispiel: Titel und Bilder benötigen in der Regel mehr Leerraum oben und unten, aber wenn zwei Bilder nebeneinander liegen einander, dann werden die beiden Bilder Der Leerraum wird sich weniger verändern. Der direkte Abstand zwischen dem h2-Tag und dem h3-Tag ist kleiner als der Abstand zwischen den beiden h2-Tags.

Als der ursprüngliche Autor vor ein paar Jahren mit der Frontend-Entwicklung begann, führten all diese Ausnahmen und Abhängigkeiten immer zu komplexem Code, visuellen Inkonsistenzen und unerwartetem Verhalten. Ich habe oft gegoogelt, warum margin-top nicht funktioniert.

Der erste Schritt

Das einfache HTML lautet wie folgt:

<article class="article">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <img src="…" alt="…">
  <p>Lorem ipsum dolor sit amet</p>
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>

Nehmen Sie normalerweise zwei Absätze heraus, um den vertikalen Abstand zwischen ihnen anzupassen. Nachdem Sie den gewünschten Effekt erzielt haben, verwenden Sie diesen Wert als Basisrand aller Elemente.

.article > * + * { 
    margin-top: 1.5rem;
}

Der obige CSS-Code fügt margin-top zu allen untergeordneten Elementen in .article hinzu, die benachbarte Geschwisterelemente haben. Nur das Hinzufügen des margin-top -Attributs zu direkten Elementen vermeidet unerwünschte Effekte. Im obigen HTML wird beispielsweise margin-top zu ul anstelle von li hinzugefügt.

Der zweite Schritt

In diesem Schritt werden spezifischere CSS-Regeln hinzugefügt, wie zum Beispiel:

.article > img + * { 
    margin-top: 3rem;
}

nach img Jedes Element erhält einen bestimmten oberen Rand. Der Effekt ähnelt dem direkten Anwenden von margin-bottom auf das Bild. Aber die Verwendung benachbarter Geschwisterselektoren und „margin-top“ hat zwei Vorteile:

　1. margin-bottom

muss nicht

aus dem letzten untergeordneten Prozess entfernt werden. 2. Und ein Kollabieren wird vermieden Ränder.

Schritt 3

Fügen Sie in diesem Schritt die Regel einem bestimmten Element hinzu, zum Beispiel:

.article > * + h2 { 
    margin-top: 4rem;
}
.article > * + img { 
    margin-top: 3rem;
}

h2 und img, die benachbarte Geschwister haben, erhalten einen bestimmten Rand oben.

Schritt 4

Behandeln Sie in diesem letzten Schritt die Stile mit besonderer Korrelation.

.article > img + img { 
    margin-top: 1rem; 
}

Ändern Sie den Abstand zwischen benachbarten Bildern distance

Bei Bedarf können Sie auch einen präzisen CSS-Selektor hinzufügen, wie zum Beispiel:

.article > img + img + img + h2 { 
    margin-top: 5rem;
}

Wenn ein h2 ist Nach drei Bildern hintereinander angeordnet, erhält es einen bestimmten Rand oben. Glücklicherweise ist dies nur ein Sonderfall, aber es ist schön zu wissen, dass benachbarte Geschwisterselektoren dieses komplexe Abhängigkeitsproblem lösen können.

Erweiterte Verwendung

Um die Lesbarkeit zu verbessern, verwenden Sie (SCSS)-Verschachtelung und schreiben Sie jede Regel in eine Zeile. Es besteht keine Notwendigkeit, Selektoren mit demselben Wert zu gruppieren, da CSSO dies später in der Build-Aufgabe verarbeiten wird.

.article {
    > * + * { margin-top: 1.5rem }
    > h2 + * { margin-top: 1rem }
    > img + * { margin-top: 3rem }
    > * + h2 { margin-top: 4rem }
    > * + h3 { margin-top: 3.5rem }
    > * + img { margin-top: 3rem }
    > img + img { margin-top: 1rem }
    > h2 + h3 { margin-top: 4.5rem }
}

Diese Technik funktioniert auch mit SASS oder CSS, wie zum Beispiel dem Baseline Grid. Wenn alle Margen anhand einer angegebenen MarginVariable berechnet werden, müssen Sie nur die Variable ändern, um die Gesamtmarge zu erhöhen oder zu verringern.

Fazit

Generell stößt man bei der Entwicklung einer Website auf sehr komplexe Artikel, die meist Elemente wie Kategorietitel, Einleitung, Text oder verschachtelte Layouts enthalten. Mit benachbarten Geschwisterselektoren und einem einzigartigen Rand oben können komplexe Designanforderungen gelöst und gleichzeitig CSS verständlich gehalten werden, was das spätere Hinzufügen oder Anpassen von Regeln erleichtert.

[Verwandte Empfehlungen]

1. Kostenloses CSS-Online-Video-Tutorial

2.CSS-Online-Handbuch

3. php.cn Dugu Jiujian (2) – CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBeispielcode für einen Geschwisterselektor zum Implementieren vertikaler Ränder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!