Hva betyr et & før et pseudo -element i CSS

En "Og”Før en pseudo-element brukes i de nestede uttalelsene for å referere til hovedforelderklassen. I en nestet uttalelse kan det være flere "Og”Symboler som refererer til samme hovedklasse. Dette betyr at “Og”Symbol før et pseudo-element indikerer at den aktuelle klassen eller pseudo-elementet er barnet til hovedforeldreklassen.

Nå er spørsmålet som oppstår her hva som er formålet med å bruke "Og”Symbol når barneklasser kan bruke navnet på foreldreklassen mens du refererer til hovedforeldreklassen?

Dette er fordi “Og”Symbolet reduserer kodeens kompleksitet og øker kodenes lesbarhet. Når koden leses for ethvert formål som å teste koden, eller til og med når brukeren må feilsøke koden, blir det mye lettere for alle å forstå flyten. Det er ikke nødvendig å skrive hele navn på hovedklassen for referanse igjen og igjen, så det sparer også tid.

Eksempel 1: Flere barneklasser som refererer til hovedklassen

Normalt, når det er flere barneklasser tilknyttet en hovedforeldreklasse, følger de syntaksen gitt nedenfor:

.Foreldre: Child1
.Foreldre: Child2
.Foreldre: Child3

I ovennevnte kodebit er det en foreldreklasse som har tre barneklasser kalt "Klasse1”,“Klasse2”, Og“Klasse3”. Alle tre barneklasser har navnet på foreldreklassen skrevet på venstre side med koloner i mellom. Den samme koden når den er skrevet med "Og”Symboler vil bli skrevet som følgende:

.foreldre
&: Child1
&: Child2
&: Child3

Navnet på foreldreklassen er erstattet av "Og”Symbol, og dette vil også samle nøyaktig på samme måte som forrige kodebit. Begge ovennevnte kodebiter utfører nøyaktig på samme måte, men stilen med å skrive dem er annerledes.

Eksempel 2: Klasser med avstand

Vi ser ofte også noen klasser skrevet med hverandre med et rom mellom dem. La oss vurdere et enkelt eksempel på to klasser med et rom mellom seg:

.Klasse1 .klasse2

Dette betyr at "Klasse2”Er barnet til“Klasse1“. Men hvis vi bruker en "Og“(Ampersand) for å skrive den samme koden. Det blir skrevet og samlet som følgende:

.klasse1
Og .klasse2

Eksempel 3: Klasser uten avstand

Hvis det ikke er noen plass mellom "Klasse1”Og“Klasse2“Det vil ikke betyr det samme og vil bli samlet på en annen måte:

.Klasse1.klasse2

Dette betyr at elementene med begge klassene “Klasse1”Og“Klasse2”Er valgt. Hvis vi vil kompilere den samme koden, men med "Og”Symbol, det blir skrevet og samlet som følgende:

.klasse1
Og.klasse2

Dette oppsummerer bruken av "Og”(Ampersand) før et pseudoelement i CSS.

Konklusjon

En "Og”(Ampersand) brukes før et pseudoelement i nestede uttalelser der det er flere foreldre- og barneklasser. “Og”Brukes til å referere til hovedforeldreklassen uten å måtte skrive navnet på foreldreklassen igjen og igjen i en kode, og på denne måten reduserer det kompleksiteten i koden og gjør den mer forståelig.