Benotzung: nth-of-type (n) With Tables
Fir Dëscher méi einfach ze liesen, ass et oft hëllefräich fir Rezepter mat alternéierend Hannergrond ze stylen. Ee vun den heefegste Weeër fir Dëscher ze stiléieren ass d'Hannergrondfär vun all aner Zeil. Dëst gëtt oft als "Zebra-Streifen" bezeechent.
Dir kënnt dëst fäeg maachen, andeems Dir all aner Zeil mat enger CSS-Klass verdeelt an dann de Stil fir dës Klass definéiert. Dëst funktionnéiert awer net de beschten oder effizientste Wee fir iwwer dat ze goen.
Wann Dir dës Methode benotzt, all Kéier musst Dir dës Tabelle änneren, musst Dir all eenzel Zeil an der Tabell änneren, fir datt all Zeil entsprécht mat den Ännerungen. Zum Beispill, wann Dir eng nei Zeil nees op Ärem Dësch setzt, da muss all aner Zeilen ënnert der Verännerung vun der Klass geännert ginn.
CSS mécht d'Tabellen mat Zebra-Streifen einfach ze stilisteschen. Dir braucht keng extra HTML Attributiounen oder CSS Klassen, maacht Dir just den: nth-of-type (n) CSS selector .
De: nth-of-type selector ass eng strukturell Pseudo-Klass an CSS, déi Iech Elementer op Basis vun hiren Bezéiungen zu Elteren an Geschwësterelementer erlaabt. Dir kënnt et benotzen fir een oder méi Elementer ze wielen op Basis vun hirer Quellbestellung. An anere Wierder kann et all Element bestëmmen deen d'néng Kanner vun engem bestëmmten Typ vun sengem Elterendeel sinn.
De Bréif n kann e Schlësselwuert (z. B. wéi ongeschaaft oder souguer), eng Zuel oder eng Formel.
Zum Beispill, all aner Paragraf ze benotzen mat enger gelben Hannergrondfarb, Äert CSS-Dokument géif zielen:
p: nth-of-type (ongeschéckt) {
Hannergrond: giel;
}}
Start mat Ärem HTML Table
Erstellt Äert Dësch esou wéi Dir normalerweis an HTML schreift. Füüg keng speziell Coursen op d'Reien oder Spalten.
Mat Ärem Stoffzeechen, fügen déi folgend CSS:
tr: nth-of-type (ongeschéckt) {
Background-Faarf: #ccc;
}}
Dëst setzt all aner Zeil mat enger groer Hannergrondstär mat der éischter Zeil.
Stil Alternéieren Spalten am selwechten Wee
Dir kënnt déi selwecht Art vu Styling zu Säulen an Ären Dëscher maachen. Fir dat ze änneren, einfach Äert den Tr -Chr mat Ärer CSS-Klasse op td änneren. Zum Beispill:
td: nth-of-type (ongeschéckt) {
Background-Faarf: #ccc;
}}
Formulaire benotzen an engem n-n-aus-Typ (n) Selector
De Syntax fir eng Formel am selector ass en + b.
a ass eng Ziffer, déi den Zyklus oder d'Indexgréisst repräsentéiert.
n ass tatsächlech de Bréif "n" a mécht e Konter, dee Stären op 0.
+ ass e Bedreiwer, deen och "-"
b ass eng Integer a representéiert de Versatzwäert - zum Beispill, wéi vill Reihen déiselwecht soll de Selektor ufänken d'Backgroundfär unzefänken. Dëst ass néideg wann e Betreiber an der Formel gehale gëtt.
Zum Beispill, wann Dir eng Hannergrondfënster fir all 3. Zeil gesitt wëllt, ass Är Formel 3n + 0. Är CSS ka kucken wéi:
tr: nth-of-type (3n + 0) {
Hannergrond: Slategray;
}}
Hëllefsinstrument fir den nth-of-type Selector
Wann Dir Iech e klengen Geheimtipp vun der Formel aspekt vun der Pseudo-Klasse-n-Typ vu selector versprécht, probéieren déi: nth Tester Site als nëtzlech Tool, deen Iech hëllefe fir d'Syntax ze definéieren fir de Look Dir wëllt erreechen. Benotzt den Dropdown-Menü fir den nëtt-of-type ze wielen (Dir kënnt och mat anere Pseudo-Klassen och experimentéieren, wéi zB nëtt Kanner).