Co oznacza „&” przed pseudo elementem w CSS

Jakiś "I”Przed pseudoelementem zostanie użyte w zagnieżdżonych stwierdzeniach w odniesieniu do głównej klasy nadrzędnej. W zagnieżdżonym oświadczeniu może być wiele „I„Symbole, które odnoszą się do tej samej klasy głównej. Oznacza to, że „I„Symbol przed pseudoelementem wskazuje, że konkretna klasa lub pseudoelement jest dzieckiem głównej klasy rodzicielskiej.

Teraz pojawia się pytanie, jaki jest cel użycia „I„Symbol, gdy zajęcia dla dzieci mogą używać nazwy klasy nadrzędnej, odnosząc się do głównej klasy nadrzędnej?

To dlatego, że „I„Symbol zmniejsza złożoność kodu i zwiększa jego czytelność kodu. Gdy kod jest odczytany w dowolnym celu, takich jak testowanie kodu, a nawet gdy użytkownik musi debugować kod, jest to o wiele łatwiejsze do zrozumienia przepływu. Nie ma potrzeby pisania pełnych nazwisk głównej klasy w celu odniesienia.

Przykład 1: Wiele klas dzieci odnoszących się do klasy głównej

Zwykle, gdy istnieje wiele klas dzieci powiązanych z główną klasą nadrzędną, postępują zgodnie ze składnią podaną poniżej:

.rodzic: Child1
.rodzic: Child2
.rodzic: Child3

W powyższym fragmencie kodu znajduje się klasa nadrzędna, która ma trzy klasy dzieci wymienione jako „Klasa 1”,„klasa 2", I "klasa3". Wszystkie trzy zajęcia dla dzieci mają nazwisko klasy nadrzędnej napisane po lewej stronie z kolonami pomiędzy. Ten sam kod, gdy jest napisane z „I„Symbole będą napisane jako następujące:

.rodzic
&: child1
&: child2
&: child3

Nazwa klasy nadrzędnej została zastąpiona przez „I„Symbol, a to również skompiluje dokładnie taki sam, jak poprzedni kod kodowy. Oba powyższe fragmenty kodu wykonują dokładnie w ten sam sposób, ale styl pisania jest inny.

Przykład 2: Zajęcia z odstępami

Często widzimy również niektóre zajęcia napisane ze sobą z przestrzenią między nimi. Rozważmy prosty przykład dwóch klas z przestrzenią między nimi:

.Klasa 1 .klasa 2

To znaczy że "klasa 2”Jest dzieckiem„Klasa 1". Ale jeśli użyjemy „I„(Ampersand), aby napisać ten sam kod. Zostanie napisane i skompilowane jako następujące:

.Klasa 1
I .klasa2

Przykład 3: Zajęcia bez odstępów

Jeśli nie ma miejsca między „Klasa 1" I "klasa 2„Nie będzie to oznaczać tego samego i zostanie skompilowane w inny sposób:

.Klasa 1.klasa 2

Oznacza to, że elementy z obu klas „Klasa 1" I "klasa 2”Są wybierane. Jeśli chcemy skompilować ten sam kod, ale z „I„Symbol, zostanie napisany i skompilowany jako następujące:

.Klasa 1
I.klasa2

To podsumowuje użycie „I”(Ampersand) przed pseudo elementem w CSS.

Wniosek

Jakiś "I”(Ampersand) jest używany przed pseudo elementem w stwierdzeniach zagnieżdżonych, w których istnieje wiele klas rodziców i dzieci. "I”Służy w odniesieniu do głównej klasy nadrzędnej bez konieczności pisania nazwy klasy nadrzędnej w kodzie i w ten sposób zmniejsza złożoność kodu i czyni ją bardziej zrozumiałą.