Kontenziell ausgewählte Elemente in einem Rasterbehälter stylen

Viele Anwendungsszenarien erfordern, dass ausgewählbare Elemente im Netz angezeigt werden, z. B. Kalender, Einkaufswagen, Galerien, Dateibrowser und Online -Bibliotheken und sogar Sicherheitsprüfungen, bei denen Sie alle Bilder mit Zebra -Kreuzungen auswählen müssen.

In diesem Artikel wird eine clevere Möglichkeit eingeführt, optionale Elemente im Netz anzuzeigen, anstatt in Recaptcha mehrere Elemente auszuwählen. Bei der Auswahl von zwei oder mehr benachbarten Projekten können wir sie mit :nth-of-type Combiner, Pseudoklasse, geschickt entwerfen und die Pseudoklasse :checked , damit sie kombiniert aussehen.

Die Idee dieses Kombinierers und Pseudoelements, um abgerundete Kontrollkästchen zu implementieren, beruht auf einem Artikel, den ich zuvor geschrieben habe. Das ist ein einfaches Design mit einer Spalte:

Diesmal wird der abgerundete Eckeffekt jedoch auf Elemente auf den vertikalen und horizontalen Achsen des Netzes angewendet. Sie müssen meinen vorherigen Beitrag nicht über Checkbox -Stile lesen, da ich alles abdecken werde, was Sie hier wissen müssen. Wenn Sie jedoch an einer vereinfachten Version dessen interessiert sind, was in diesem Artikel getan wird, ist dieser Artikel einen Blick wert.

Bevor du anfing ...

Es wird sehr nützlich sein, die folgenden Punkte zu beachten. Zum Einfachheit halber habe ich in meiner Demo statische HTML und CSS in meiner Demo verwendet. Abhängig von Ihrer Anwendung müssen Sie möglicherweise das Netz und seine Elemente dynamisch generieren. Um mich auf die Effekte zu konzentrieren, habe ich die tatsächliche Überprüfung der Hilfsfunktion weggelassen, aber in einer Produktionsumgebung müssen Sie auf jeden Fall so etwas berücksichtigen.

Außerdem verwende ich CSS -Netz für Layout. Ich empfehle dies, aber es ist nur eine persönliche Präferenz und Ihre Erfahrung kann variieren. Mit einem Raster kann ich für mich ::before und ::after Pseudo-Elementen des Projekts mit Geschwister-Selektoren leicht finden.

Unabhängig davon, welche Layout-Standards Sie in Ihrer Anwendung verwenden möchten, stellen Sie sicher, dass die Pseudoelemente immer noch in CSS positioniert werden können, und stellen Sie sicher, dass das Layout über verschiedene Browser und Bildschirme gleich bleibt.

Fangen wir an

Wie Sie möglicherweise in früheren Demonstrationen bemerkt haben, ändern und deaktivieren Sie die Kontrollkästchen -Elemente das Design des Kontrollkästchens abhängig vom Auswahlstatus anderer Kontrollkästchen. Dies liegt daran, dass ich die Pseudoelement des benachbarten Elements anstelle von selbst verwende, um jede Box zu stylen.

Die folgende Abbildung zeigt, wie sich das ::before Pseudoelement des Feldes in jeder Spalte (außer der ersten Spalte) mit dem Feld links überlappt und wie sich das ::after Pseudo-Element des Feldes in jeder Zeile (mit Ausnahme der ersten Zeile) überlappt mit dem Feld oben.

Dies ist der Grundcode

Tagging ist sehr einfach:

<main></main>

Es gibt mehr im ersten CSS. Aber zuallererst das Raster selbst:

 /* Netz*/
hauptsächlich {
  Anzeige: Grid;
  Gitter: Wiederholung (5, 60px) / Wiederholung (4, 85px);
  Ausrichtung: Zentrum;
  Justify-Items: Zentrum;
  Rand: 0;
}

Dies ist ein Gitter mit fünf Elementen und vier Spalten, die Kontrollkästchen enthalten. Ich beschloss, das Standard-Erscheinungsbild der Kontrollkästchen zu löschen und ihnen dann meinen eigenen hellgrauen Hintergrund und hyper-abgerundete Grenzen zu geben:

 /* Alle Kontrollkästchen*///
Eingabe {
  -Webkit-Appearanz: Keine;
  Aussehen: Keine;
  Hintergrund: #ddd;
  Border-Radius: 20px;
  Cursor: Zeiger;
  Anzeige: Grid;
  Höhe: 40px;
  Breite: 60px;
  Rand: 0;
}

Beachten Sie auch, dass das Kontrollkästchen selbst auch ein Raster ist. Dies ist der Schlüssel, um seine ::before und ::after Pseudoelementen zu setzen. Lassen Sie es uns jetzt jetzt tun:

 /* Pseudo-Elemente außer der ersten Spalte und der ersten Zeile*///
Eingabe: Nicht (: N-ten vom Typ (4n 1)) :: vor,
Eingabe: N-ten vom Typ (n 5) :: nach {{
  Inhalt: '';
  Border-Radius: 20px;
  Gitterfläche: 1/1;
  Zeiger-Events: Keine;
}

Wir wählen nur Pseudoelemente aus, die sich nicht im Kontrollkästchen der ersten Spalte oder Zeile des Netzes befinden. input:not(:nth-of-type(4n 1)) beginnt mit dem ersten Kontrollkästchen und auswählen ::before den vier Elementen, die dort beginnen. Aber bitte beachten Sie, dass wir über :not() sprechen, also überspringen wir das ::before Pseudoelement jedes vierten Kontrollkästchens von der ersten. Dann beginnen wir mit dem fünften Kontrollkästchen und wenden den Stil auf das ::after Pseudoelement jedes Kontrollkästchens.

Jetzt können wir das ::before und ::after Pseudo-Elementen für jedes Kontrollkästchen, das nicht in der ersten Spalte oder Zeile des Netzes befindet, so, dass sie sich nach links oder nach oben bewegen, und versteckt sie standardmäßig versteckt.

 /* Pseudo-Element außer der ersten Spalte*/
Eingabe: Nicht (: n-ten vom Typ (4n 1)) :: vor {{
  Transformation: Translatex (-85px);
}

/* Pseudo-Element außer der ersten Zeile*/
Eingabe: N-ten vom Typ (n 5) :: nach {{
  Transformation: Translatey (-60px);
}

Einstellungen: Überprüfter Zustandsstil

Jetzt ist der Stil, wenn sich das Kontrollkästchen im :checked Status befindet. Lassen Sie uns zunächst eine Farbe wie einen lindgrünen Hintergrund geben:

 Eingabe: Überprüft {Hintergrund: Limegreen;

Eine ausgewählte Box sollte in der Lage sein, alle benachbarten ausgewählten Boxen neu zu steuern. Mit anderen Worten, wenn wir das Kontrollkästchen 11. im Raster auswählen, sollten wir auch in der Lage sein, die obigen Kästchen oben, links und rechts zu stylen.

Dies geschieht durch die Positionierung der richtigen Pseudoelemente. Wie machen wir das? Nun, es hängt von der tatsächlichen Anzahl der Spalten im Netz ab. Wenn zwei benachbarte Boxen in einem 5 × 4 -Raster ausgewählt werden, ist das CSS wie folgt:

 /* Die rechte Grenze des ausgewählten Feldes (wenn das Element rechts ausgewählt ist)*//
Eingabe: Nicht (: N-ten vom Typ (4n)): Überprüfung Eingabe: Checked :: vor {
  Grenze-rechte Radius: 0;
  Grenz-Bottom-Right-Radius: 0;
  Hintergrund: Limegreen;
}
/* Die untere Grenze des ausgewählten Feldes (wenn das folgende Element ausgewählt ist)*//
Eingabe: N-ten Last des Typs (N 5): Überprüft * * * Eingabe: Checked :: After {{
  Grenz-Bottom-Right-Radius: 0;
  Border-Bottom-Links-Radius: 0;
  Hintergrund: Limegreen;
}
/* Die linke Grenze des ausgewählten Box benachbarte (rechts) ausgewählte Box*///
Eingabe: Nicht (: N-ten vom Typ (4N)): Überprüfung Eingabe: Überprüft Eingabe :: vor {
  Border-Top-Links-Radius: 0;
  Border-Bottom-Links-Radius: 0;
  Hintergrund: Limegreen;
}
/* Die obere Grenze des ausgewählten Feldes (unten) ausgewählte Box*///
Eingabe: Nicht (: N-ten vom Typ (4n)): geprüft * * * Eingabe: Überprüft Eingabe :: vor {
  Border-Top-Links-Radius: 0;
  Grenze-rechte Radius: 0;
  Hintergrund: Limegreen;
}

Wenn Sie möchten, können Sie den obigen Code dynamisch generieren. Für ein typisches Netz (z. B. eine Bildbibliothek) ist die Anzahl der Spalten jedoch gering und kann eine feste Anzahl von Elementen sein, während die Zeilen möglicherweise weiter steigen. Vor allem, wenn es für mobile Bildschirme ausgelegt ist. Deshalb ist dieser Ansatz immer noch ein effektiver Ansatz. Wenn Ihre Bewerbung aus irgendeinem Grund endliche Zeilen und erweiterte Spalten hat, erwägen Sie, das Netz auf die Seiten zu drehen, da das CSS -Gitter für eine Reihe von Projekten von links nach rechts, von oben nach unten (d. H. Zeile für Zeile), von links nach rechts arrangiert.

Wir müssen auch Stile zum letzten Kontrollkästchen im Raster hinzufügen - sie werden nicht alle von Pseudoelementen überlagert, da sie der letzte Element in jeder Achse sind.

 /* Die linke Grenze des ausgewählten Feldes (letzte Spalte)*/
Eingabe: N-ten vom Typ (4N-1): Überprüfung Eingabe: geprüft {
  Border-Top-Links-Radius: 0;
  Border-Bottom-Links-Radius: 0;
}
/* Die obere Grenze des ausgewählten Feldes (letzte Spalte) benachbarte (untere) überprüftes Kontrollkästchen*///
Eingabe: N-ten vom Typ (4n): geprüft * * * Eingabe: geprüft {
  Border-Top-Links-Radius: 0;
  Grenze-rechte Radius: 0;
}

Diese Selektoren sind schwierig! Der erste ...

 Eingabe: N-ten Typ (4N-1): Überprüfte Eingabe: Überprüft

... es sagt im Grunde das:

In der vorletzten Spalte befindet sich ein ausgewähltes Element neben einem ausgewählten Element.

Die Berechnungsmethode des nth-of-type lautet wie folgt:

 <code>4(0) - 1 = 无匹配项4(1) - 1 = 第3 个项目4(2) - 1 = 第7 个项目4(3) - 1 = 第11 个项目等等。</code>

Wir beginnen also mit dem dritten Kontrollkästchen und wählen jedes vierte Kontrollkästchen von dort aus. Wenn die Kontrollkästchen in der Sequenz ausgewählt sind, stylen wir auch die benachbarten Kontrollkästchen, wenn sie ebenfalls ausgewählt sind.

Und diese Zeile:

 Eingabe: N-ten vom Typ (4N): geprüft * * * Eingabe: Überprüft

Es heißt:

Ein Element, vorausgesetzt, dass es direkt neben einem Element ausgewählt ist, befindet sich das Element direkt an ein anderes Element, das Element befindet sich direkt an ein anderes Element und das Element befindet sich direkt an ein Element im ausgewählten Zustand.

Dies bedeutet, dass wir jedes vierte Kontrollkästchen auswählen, das ausgewählt ist. Wenn das Kontrollkästchen in der Sequenz ausgewählt ist, stylen wir das Kontrollkästchen des nächsten vierten Viertens mit dem Kontrollkästchen.

Benutze es

Was wir gerade gesehen haben, waren die allgemeinen Prinzipien und Logik hinter Design. Wiederum hängt die praktische Praktikabilität in Ihrer Anwendung vom Netzdesign ab.

Ich habe abgerundete Grenzen verwendet, aber Sie können andere Formen ausprobieren und sogar Hintergrundeffekte ausprobieren (Temani gibt Ihnen Ideen). Nachdem Sie wissen, wie Formeln funktionieren, hängt der Rest vollständig von Ihrer Vorstellungskraft ab.

So könnte es in einem einfachen Kalender aussehen:

Auch dies ist nur ein grober Prototyp mit statischen Tags. Darüber hinaus gibt es viele Hilfsfunktionen, die in der Kalenderfunktion berücksichtigt werden müssen.

Das war's! Sehr klug, oder? Ich meine, nichts ganz "neu" darüber, was passiert ist. Aber es ist ein gutes Beispiel für die Auswahl der Dinge in CSS. Wenn wir fortschrittlichere Selektionstechniken mit Combinern und Pseudoelementen beherrschen, können unsere Styling-Funktionen über Stile hinausgehen, die nur ein Element festlegen-wie wir Elemente, die auf dem Zustand eines anderen Elements basieren, bedingt stilvoll stylen können.

Das obige ist der detaillierte Inhalt vonKontenziell ausgewählte Elemente in einem Rasterbehälter stylen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!