Den endelige vejledning til CSS Pseudo-klasser
Uanset om du er en nybegynder eller en erfaren CSS-udvikler, har du sikkert hørt om pseudo-klasser. Den mest kendte pseudoklasse er sandsynligvis : hover, som gør det muligt for os at style et element, når det er i hover tilstand, dvs. når en pegeranordning, såsom en mus, peger på den.
Efter konceptet for vores tidligere indlæg på margen: Auto og CSS Floats, ser vi nærmere på pseudoklasserne i dette indlæg. Vi vil se hvilke pseudoklasser er det virkelig, hvordan de arbejder, hvordan vi kan kategorisere dem, og hvordan de adskiller sig fra pseudo-elementer.
Hvad er pseudo-klasser?
En pseudoklasse er et søgeord, vi kan tilføje til CSS-selektorer for at definer en særlig tilstand af det tilhørende HTML element. Vi kan tilføje en pseudoklasse til en CSS vælger ved at bruge kolon syntax : sådan her: a: svever ...
En CSS-klasse er en attribut, som vi kan tilføje til HTML-elementer, vi ønsker at anvende de samme stilregler for, f.eks. Topmenupunkter eller titler på sidebar widgets. Med andre ord kan vi bruge CSS klasser til gruppere eller klassificere HTML-elementer der er ens på den ene eller den anden måde.
Pseudoklasserne ligner dem i den forstand, at de også er bruges til at tilføje stilregler til de elementer, der har samme karakteristika.
Men mens ægte klasser er brugerdefineret og kan ses i kildekoden, for eksempel Det job af regelmæssige CSS klasser er at klassificere eller gruppere elementer. Udviklere ved, hvordan deres elementer skal grupperes: de kan danne klasser som "menupunkter", "knapper", "miniaturer" osv. Til gruppering og senere stil lignende elementer. Disse klassifikationer er baseret på elementernes egenskaber, der er givet af udviklerne selv. For eksempel, hvis en udvikler beslutter at bruge en HTML-elementer har dog deres egne fælles egenskaber baseret på deres tilstand, position, natur og interaktion med siden og brugeren. Disse er de karakteristika, der er ikke typisk markeret i HTML-koden, men vi kan målrette dem med pseudoklasser i CSS, for eksempel: Disse er de slags egenskaber, som generelt er rettet mod pseudoklasserne. For at forstå forskellen mellem klasser og pseudoklasser bedre, lad os antage, at vi bruger klassen Vi kan style disse sidste barnelementer med følgende CSS: Men hvad sker der, når det sidste element ændres? Nå, vi bliver nødt til at flytte Dette besvær med opdatering klasser kan overlades til bruger agenten, i det mindste for de egenskaber, der er almindelige blandt elementer (og at være et sidste element er så almindeligt som det kan få). At have en foruddefineret Der er mange slags pseudo-klasser, alle giver os muligheder for at målrette mod elementer baseret på deres funktioner, der ellers er utilgængelige eller vanskeligere at få adgang til. Her er en liste over standard pseudoklasser i MDN. Dynamiske pseudoklasser tilføjes til og fjernes fra HTML-elementer dynamisk, baseret på den tilstand, de overgår til som reaktion på brugerens interaktioner. Nogle af eksemplerne på dynamiske pseudoklasser er Statsbaserede pseudoklasser føjes til elementer, når de er i en bestemt statisk tilstand. Nogle af de mest kendte eksempler er: Den mest populære statsbaserede pseudoklasse skal være Strukturelle pseudoklasser klassificerer elementer baseret på deres position i dokumentstrukturen. Dens mest almindelige eksempler er Der er også diverse pseudoklasser, der er svære at klassificere, såsom: En af de sværeste ting om pseudo-klasser er nok at forstå forskellen mellem Begge er strukturelle pseudoklasser og markering et specifikt element inde i et overordnet element (beholder), men på en anden måde. Antage n er 2 da Lad os se på et eksempel. Lad os se, hvordan denne korte CSS stiler HTML'en i to forskellige tilfælde. I sag 1 er det andet element inde i a Men hvis moderelementet gør Har et andet afsnit, I vores eksempel er Stk. 1, barn 1 Stk. 2, barn 3 I det andet tilfælde flytter vi den uordnede liste til tredjepladsen, og andet afsnit kommer før det. Det betyder, at både Stk. 1, barn 1 Stk. 2, barn 2 Hvis du vil læse mere om forskellene mellem Når vi taler om pseudoklasser, er det også vigtigt at forstå hvordan de adskiller sig fra pseudo-elementer, for ikke at blande dem op. Men mens vi bruger pseudoklasser til at vælge HTML-elementer, som findes i dokumentet træet bare ikke markeret særskilt, giver pseudoelementer os mulighed for at målrette mod elementer som findes normalt ikke i DOM, enten overhovedet (f.eks Der er også en forskel i syntaks. Pseudo-elementer er generelt identificeret med dobbelt kolon Dette kan føre til forveksling, som i CSS2, pseudo-elementer blev markeret med et enkelt kolon også - browsere accepterer stadig single-kolonnesyntaxen for pseudo-elementer. Der er også forskelle mellem pseudoklasser og pseudo-elementer i måden vi kan målrette dem med CSS. Pseudo-elementer kan kun vises efter sekvensen af selektorer, mens pseudo-klasser kan placeres hvor som helst i CSS-vælgesekvensen. Du kan f.eks. Målrette mod den sidste liste element i et listelement som ELLER Den første sekvens af vælgeren vælger det sidste barn inde i Lad os prøve at gøre noget lignende med pseudo-elementer. CSS-koden ovenfor er gyldig, og teksten "rød" vises efter det Denne kode på den anden side vil ikke fungere som vi kan ikke ændre placeringen af et pseudoelement inde i vælger sekvensen. Også kun ét pseudo-element kan vises ved siden af en vælger, mens pseudoklasserne kan kombineres med hinanden hvis kombinationen giver mening. For eksempel til at målrette første barnelementer, der også er skrivebeskyttet, kan vi oprette en kombination af pseudoklasserne En vælgerkode med a Det er vigtigt at vide det disse er ikke CSS pseudo-klasser som er målrettet af jQuery. De kaldes jQuery selector extensions. jQuery selector extensions giver dig mulighed for målrettede HTML-elementer med enklere søgeord. De fleste af dem er kombinationer af flere normale CSS-selektorer, som er repræsenteret med et enkelt søgeord.Formål med pseudo-klasser
.sidst at identificere de sidste elementer i forskellige forældrebeholdere.
li.last text-transform: store bogstaver; option.last font-style: kursiv;
.sidst klasse fra det tidligere sidste element til den nuværende.:sidste barn pseudo-klasse er meget nyttigt faktisk. På denne måde, vi behøver ikke at angive det sidste element i HTML-koden, men vi kan stadig style dem med følgende CSS: li: sidste barn text-transform: store bogstaver; valg: sidste barn skrifttype: kursiv;
Hovedtyper af pseudoklasser
1. Dynamiske pseudo-klasser
: hover, :fokus, :link, og : besøgt, som alle kan tilføjes til anker tag. a: besøgte farve: # 8D20AE; .knap: sving, .knap: fokus font-weight: bold;
2. State-Based Pseudo-Klasser
: kontrolleret der kan søges i afkrydsningsfelter ():Fuld skærm at målrette mod ethvert element, der aktuelt vises i fuldskærmstilstand:handicappet for HTML-elementer, der kan være i deaktiveret tilstand, f.eks , , og . : kontrolleret, som flagger, om en afkrydsningsfelt er markeret eller ej. .afkrydsningsfelt: tjekket + etiket font-style: kursiv; input: deaktiveret baggrundsfarve: #EEEEEE;
3. Strukturelle pseudo-klasser
: Første barn, :sidste barn, og : N'te-barn (n) - alle kan bruges til at målrette et bestemt barnelement inde i en beholder baseret på sin position - og :rod som er målrettet mod det øverste niveauelement i DOM. 4. Diverse pseudoklasser
: Ikke (x) som vælger elementer, der ikke stemmer overens med vælgeren x: Lang (sprog-kode) der vælger elementer af hvilket indhold der er i et bestemt sprog: Dir (direktionalitet) som vælger elementer med indhold af en given retningsretning (venstre til højre eller højre til venstre). p: lang (ko) baggrundsfarve: # FFFF00; : root baggrundsfarve: # FAEBD7;
n'te-barn vs nth af typen Pseudo-klasse
: N'te-barn og : N'te-of-typen pseudo-klasser.: N'te-of-barn (n) mål et element, der er andet barn af dets overordnede element, og : N'te-of-type (n) mål den anden blandt samme type af elementet (som afsnit) inde i et overordnet element. / * et afsnit, der også er det andet barn indenfor dets overordnede element * / p: nth-child (2) color: # 1E90FF; // lightblue / * andet afsnit inde i et overordnet element * / p: nth-of-type (2) font-weight: bold;
Sag 1
n'te-barn (2) regel gælder ikke for det. Selv om det er et andet barn, er det det ikke et afsnit. nth-of-type (2) regel gælder, da denne regel kun søger efter elementer, og er ligeglad med andre typer af elementer (såsom uordnede lister) inde i moderelementet.nth-of-type (2) regel vil style andet afsnit, som er barn 3.
Uordnet liste 1, barn 2
Sag 2
: N'te-barn (2) og : N'te-of-type (2) regler vil blive anvendt, da andet afsnit også er moderens andet barn
Uordnet liste 1, barn 3
: N'te-of-barn og : N'te-of-typen pseudo-klasser, CSS Tricks har et godt indlæg på den. Hvis du bruger SASS, kan Family.scss hjælpe dig med at oprette komplicerede n'te-barn'ified elementer.Pseudo-klasser vs pseudo-elementer
Pseudo-elementer, såsom ::Før og ::efter (se denne vejledning om hvordan man bruger dem) er også tilføjet af brugeragenter, og de kan målrettes og styles med CSS også ligesom pseudoklasser. ::Før og ::efter) eller kun som visse dele af eksisterende elementer (f.eks :: første bogstaver eller :: pladsholder). ::, mens pseudoklasser identificeres med et enkelt tyktarm :.1. Deres sted i CSS Selector Sequence
ul>: last-child.red farve: # B0171F;
ul> .red: sidste barn farve: # B0171F;
.rød) og den anden vælger det sidste barn blandt elementer, der besidder .rød klasse inde ul> .red :: efter display: block; indhold: 'rød'; farve: # B0171F;
emner med klassen .rød. ul> :: after.red display: block; indhold: 'rød'; farve: # B0171F;
2. Antal forekomster i en vælgersekvens
: Første barn og :Læs kun på følgende måde: : første barn: skrivebeskyttet farve: #EEEEEE;
jQuery Selector Extensions
: syntaks er ikke altid en korrekt CSS pseudoklasse. Hvis du nogensinde har brugt jQuery, så har du muligvis brugt mange af sine vælgere med : syntaks, for eksempel $ ( ': Afkrydsningsfeltet'), $ ( ': Input') og $ ( ': Valgt). / * Skift skrifttype for alle input-relaterede HTML-elementer, som knap, vælg og indtast * / $ (": input") .css ("font-family", "courier new")
