CSS Forskjellen mellom pseudo-kurs og Pseudo-Elements

I CSS, eller Cascading Style Sheets, kan du bruke stiler - alt fra skriftfarger og ansikter til grensene til bakgrunnsbilder eller farger - til ett eller flere elementer på siden din. Du definerer stiler for hvert element ved hjelp av den tilhørende velgeren. I noen tilfeller kan du søke atferd til HTML-elementer med pseudo-elementer eller pseudo-klasser, som bare påvirker enkelte velgere og er funksjonelt det samme.

CSS velgere

Vanligvis er velgeren av en CSS-element det samme som HTML-kode. For eksempel vil bruke en stil på alle punktene, som bruker "<p>" tag, vil du bruke "p" som velgeren, som i følgende eksempel som slår skriftfarge svart:

p
{
color: black;
}

Hvis du ønsker å endre noen, men ikke alle punktene, kan du lage en klasse som gjelder for flere velgere og bruke en klasse for ulike velgere. For eksempel, for å vise enkelte deler av websiden med rød tekst, kan du lage den følger klassen heter "red."

.rød
{
color: red;
}

Når du angir klassen som "rød" i HTML (for eksempel "<p class =" red ">"), fargen vises rødt.

pseudo CSS

I CSS, en pseudo-element eller pseudo-klassen omfatter en effekt på bare visse deler av en velger ved hjelp av syntaksen "velgeren: pseudo-element". Begge pseudo CSS-stiler bruker samme syntaks, så det er umulig å skille dem fra hverandre bare ved å identifisere dem. Videre begge pseudo-elementer og pseudo-klasser automatisk gjelde for en bestemt del av tilstanden til en velger / HTML-elementet. For eksempel gjelder den første bokstaven pseudo-element bare til den første bokstaven i et nytt avsnitt, og du trenger ikke å bruke en ekstra klasse til avsnitt. På samme måte kan du bruke effekter til en aktiv, klikket, link, en svevde link eller en besøkt link med pseudo-klasser / elementer.

vanlige bruksområder

Det finnes flere standard pseudo elementer eller klasser. For eksempel kan du bruke en bestemt effekt til en første bokstav eller et avsnitt, som ligner på effekten av et første linjen i et kapittel i noen bøker, med den første bokstaven pseudo element ved hjelp av følgende syntaks:

p: first-letter
{
font-size: xx-large;
}

I dette eksempelet, vil din første bokstaven vises mye større enn teksten som følger den, sette den fra hverandre visuelt. En lignende pseudo-klasse, "første linje" påvirker hele første linjen i et avsnitt. I tillegg til dette, anker pseudo-klasser som "a: hover" gjelder bare for koblinger i bestemte stater (som blir svevde over). Du kan selv endre elementer før (eller etter) et bestemt element med ": før" (eller ": etter") pseudo-element.

betraktninger

Selv om det ikke er noen meningsfulle forskjeller mellom pseudo-elementer og pseudo-klasser i CSS, oppstår noen problemer når du arbeider med pseudo CSS. For eksempel er pseudo-klasser ikke store og små bokstaver, slik at du kan spare krefter ved å la dem små bokstaver i ditt stilark. Videre, ifølge tech nettstedet W3School, må du bruke riktig rekkefølge når du arbeider med mer enn one.anchor pseudo-klasser. For eksempel "a: hover" må følge "a: link" og "a: visited" for hover attributter for å vises riktig, og "a: aktiv" må være den endelige pseudo-element i dette settet i stilarket. Sist, når du bruker pseudo-elelement "first-line", avhenger den første linjen på hvor leseren skaper et linjeskift og varierer i henhold til nettleser og skjermstørrelsen.