Den Definitive Guide til CSS Pseudo-Klasser
Enten du er en nybegynner eller en erfaren CSS-utvikler, har du sikkert hørt om pseudo-klasser. Den mest kjente pseudoklassen er sannsynligvis :sveve, som gjør at vi kan style et element når det er i hover-tilstanden, dvs. når en pekerenhet, så som en mus, er spiss på den.
Etter konseptet av våre tidligere innlegg på margin: auto og CSS Floats, tar vi nærmere på pseudoklassene i dette innlegget. Vi får se hvilke pseudoklasser egentlig er, hvordan de jobber, hvordan vi kan kategorisere dem, og hvordan de er forskjellige fra pseudo-elementer.
Hva er Pseudo-klasser?
En pseudoklasse er et søkeord vi kan legge til i CSS-seleksjonene for å kunne definer en spesiell tilstand av det tilhørende HTML-elementet. Vi kan legge til en pseudoklasse til en CSS väljare ved å bruke kolon syntaks : som dette: a: svever ...
En CSS-klasse er et attributt vi kan legge til i HTML-elementer som vi ønsker å bruke de samme stilreglene for, for eksempel toppmenyelementer eller titler på sidebar-widgets. Med andre ord kan vi bruke CSS klasser til gruppere eller klassifisere HTML-elementer som ligner på en eller annen måte.
Pseudoklasser ligner dem i den forstand at de også er brukes til å legge til stilregler til elementene som har samme karakteristikk.
Men mens ekte klasser er brukerdefinert og kan ses i kildekoden, for eksempel De jobb med vanlige CSS-klasser er til klassifisere eller gruppere elementer. Utviklere vet hvordan elementene skal grupperes: de kan danne klasser som "menyelementer", "knapper", "miniatyrbilder" etc. for å gruppere og senere utforme lignende elementer. Disse klassifiseringene er basert på elementets egenskaper som er gitt av utviklerne selv. For eksempel, hvis en utvikler bestemmer seg for å bruke en HTML-elementer har imidlertid deres egne felles egenskaper basert på deres tilstand, posisjon, natur og samspill med siden og brukeren. Disse er egenskapene som er ikke vanligvis merket i HTML-koden, men vi kan mål dem med pseudo-klasser i CSS, for eksempel: Dette er typen egenskaper som generelt er rettet mot pseudoklassene. For å forstå forskjellen mellom klasser og pseudoklasser bedre, må vi anta at vi bruker klassen Vi kan utforme disse siste barnelementene med følgende CSS: Men hva skjer når det siste elementet endres? Vel, vi må flytte Dette besværet med oppdateringsklasser kan overlates til brukeragenten, i hvert fall for de egenskapene som er vanlige blant elementene (og å være et siste element er like vanlig som det kan bli). Å ha en forhåndsdefinert Det finnes mange typer pseudoklasser, alle gir oss muligheter til å målrette elementer basert på deres funksjoner som ellers er utilgjengelige eller vanskeligere å få tilgang til. Her er en liste over standard pseudoklasser i MDN. Dynamiske pseudoklasser legges til og fjernes fra HTML-elementer dynamisk, basert på staten de overgår til som svar på brukerens interaksjoner. Noen av eksemplene på dynamiske pseudoklasser er Statlige pseudoklasser legges til elementer når de er i en bestemt statisk tilstand. Noen av de mest kjente eksemplene er: Den mest populære statsbaserte pseudoklassen må være Strukturelle pseudoklasser klassifiserer elementer basert på deres posisjon i dokumentstrukturen. Dens mest vanlige eksempler er Det finnes også diverse pseudoklasser som er vanskelig å klassifisere, for eksempel: En av de vanskeligste tingene om pseudoklasser er nok å forstå forskjellen mellom Begge er strukturelle pseudoklasser og mark et bestemt element i et foreldreelement (container), men på en annen måte. Anta n er 2 da La oss ta en titt på et eksempel. La oss se hvordan denne korte CSS-stilen HTML-filen i to forskjellige tilfeller. I tilfelle 1, det andre elementet inne i a Men hvis foreldreelementet gjør ha et annet avsnitt, I vårt eksempel er Punkt 1, barn 1 Punkt 2, barn 3 I andre tilfelle flytter vi den uordnede listen til tredjeplassen, og det andre avsnittet kommer før det. Dette betyr at både Punkt 1, barn 1 Punkt 2, barn 2 Hvis du vil lese mer om forskjellene mellom Når vi snakker om pseudoklasser, er det også viktig å forstå hvordan de avviger fra pseudo-elementer, for ikke å blande dem opp. Men mens vi bruker pseudoklasser til å velge HTML-elementer som finnes i dokumenttreet bare ikke merket separat, tillater pseudo-elementer oss å målrette elementer som finnes vanligvis ikke i DOM, enten i det hele tatt (f.eks Det er også en forskjell i syntaks. Pseudo-elementer er generelt identifisert med dobbelt kolon Dette kan føre til forveksling, som i CSS2, pseudoelementer ble merket med en enkelt kolon også - nettlesere aksepterer fortsatt singel kolon syntaks for pseudo-elementer. Det er også forskjeller mellom pseudoklasser og pseudo-elementer i måten vi kan målrette dem med CSS. Pseudo-elementer kan bare vises etter sekvensen av selektorer, mens pseudoklasser kan plasseres hvor som helst i CSS-velgesekvensen. For eksempel kan du målrette mot den siste listeelementet til et listelement som ELLER Den første sekvensen til velgeren velger det siste barnet inne i La oss prøve å gjøre noe lignende med pseudo-elementer. CSS-koden ovenfor er gyldig, og teksten "rød" vises etter de Denne koden derimot, vil ikke fungere, som vi kan ikke endre posisjonen til et pseudo-element inne i velgesekvensen. Også bare ett pseudo-element kan vises ved siden av en velger, mens pseudo-klasser kan kombineres med hverandre hvis kombinasjonen er fornuftig. For eksempel, for å målrette første barnelementer som også er skrivebeskyttet, kan vi lage en kombinasjon av pseudoklassene En velgerkode med a Det er viktig å vite det disse er ikke CSS pseudo-klasser som er målrettet av jQuery. De kalles jQuery selector extensions. jQuery selector extensions lar deg målrett HTML-elementer med enklere søkeord. De fleste er kombinasjoner av flere vanlige CSS-seleksorer, som er representert med et enkelt søkeord.Formål med pseudo-klasser
.siste å identifisere de siste elementene i forskjellige foreldrebeholdere.
li.last text-transform: store bokstaver; option.last font-style: italic;
.siste klasse fra det tidligere siste elementet til den nåværende.:siste barn pseudo-klasse er veldig nyttig faktisk. På denne måten, vi trenger ikke å indikere det siste elementet i HTML-koden, men vi kan fortsatt stille dem med følgende CSS: li: siste barn text-transform: store bokstaver; alternativ: siste barn skrifttype: kursiv;
Hovedtyper av pseudo-klasser
1. Dynamiske pseudo-klasser
:sveve, :fokus, : link, og : besøkt, som alle kan legges til anker tag. a: besøkt farge: # 8D20AE; . knapp: svever,. knapp: fokus font-weight: bold;
2. Statsbaserte pseudoklasser
:sjekket som kan brukes for avmerkingsbokser ():full skjerm å målrette mot hvilket som helst element som for øyeblikket vises i fullskjermmodus:funksjonshemmet for HTML-elementer som kan være i deaktivert modus, for eksempel , , og . :sjekket, som flagger om en avkrysningsboks er merket eller ikke. .avkrysningsboks: merket + etikett font-style: italic; Inndata: deaktivert bakgrunnsfarge: #EEEEEE;
3. Strukturelle pseudo-klasser
:første barn, :siste barn, og : N-te-barn (n) - alle kan brukes til å målrette et bestemt barnelement inne i en beholder basert på sin posisjon - og :rot som retter seg mot det høyeste nivået av foreldreelementet i DOM. 4. Diverse pseudoklasser
: Ikke (x) som velger elementer som ikke samsvarer med väljeren x: Lang (språkkode) som velger elementer av hvilket innhold som er i et bestemt språk: Dir (direktivitet) som velger elementer med innhold av en gitt retningsretning (venstre til høyre eller høyre til venstre). p: lang (ko) bakgrunnsfarge: # FFFF00; : root background-color: # FAEBD7;
NTH-barn vs nte av typen Pseudo-klasser
: N-te-barn og : N-te-of-type pseudo-klasser.: N-te-i-barn (n) mål et element som er andre barn av foreldreelementet, og : N-te-of-type (n) mål den andre blant samme type av elementet (for eksempel avsnitt) inne i et foreldreelement. / * et avsnitt som også er det andre barnet i sitt foreldreelement * / p: nth-child (2) color: # 1E90FF; // lightblue / * det andre avsnittet i et foreldreelement * / p: nth-of-type (2) font-weight: bold;
Sak 1
n'te barn (2) regelen gjelder ikke for det. Selv om det er et andre barn, er det det ikke en paragraf. n'te-av-typen (2) regelen vil gjelde, da denne regelen bare ser etter elementer, og bryr seg ikke om andre typer av elementer (for eksempel uordnede lister) inne i hovedelementet.n'te-av-typen (2) regelen vil stile andre leddet som er barn 3.
Uordnet liste 1, barn 2
Sak 2
: N-te-barn (2) og : N-te-i-typen (2) reglene vil bli brukt, ettersom annet ledd er også barnets andre barn
Uordnet liste 1, barn 3
: N-te-of-barn og : N-te-of-type pseudo-klasser, CSS Tricks har et flott innlegg på den. Hvis du bruker SASS, kan Family.scss hjelpe deg med å lage kompliserte NTH-barn'ified elementer.Pseudo-klasser vs pseudo-elementer
Pseudo-elementer, som for eksempel ::før og ::etter (se denne veiledningen om hvordan du bruker dem) er også lagt til av brukeragenter, og de kan målrettes og utformes med CSS også, akkurat som pseudoklasser. ::før og ::etter) eller bare som visse deler av eksisterende elementer (f.eks ::første bokstav eller :: plassholder). ::, mens pseudoklasser er identifisert med en enkelt kolon :.1. Deres plass i CSS-velgningssekvensen
ul>: last-child.red color: # B0171F;
ul> .red: siste barn farge: # B0171F;
.rød) og den andre velger det siste barnet blant elementene som besitter .rød klasse inne ul> .red :: etter display: block; innhold: "rødt"; farge: # B0171F;
elementer med klassen .rød. ul> :: after.red display: block; innhold: "rødt"; farge: # B0171F;
2. Antall forekomster i en velgesekvens
:første barn og : Skrivebeskyttet på følgende måte: : første barn: skrivebeskyttet farge: #EEEEEE;
jQuery Selector Extensions
: syntaks er ikke alltid en riktig CSS pseudoklasse. Hvis du noen gang har brukt jQuery, kan du ha brukt mange av sine seleksjoner med : syntaks, for eksempel $ ( ': Boksen'), $ ( ': Inngang') og $ ( ': Valgt'). / * Endre skrifttypen for alle input-relaterte HTML-elementer, som knapp, velg og skriv inn * / $ (": input") .css ("font-family", "courier new")
