Selektory CSS

CSS (Acronim of Cascading Style Arkusz) oferuje pewne wzorce, które są ukierunkowane Selektory CSS. Selektory te znajdują elementy HTML na podstawie ID, klasa, typ, itp.

Zastanawiasz się, jak działają selektory CSS? Bez obaw! W tym artykule pokazuje szczegółowe zrozumienie selektorów CSS z przykładami. Najpierw zacznijmy od składni:

Składnia

Składnia do pisania selektora CSS jest pokazana w fragmencie poniżej podania:

Tutaj „P” to selektor, który przekonwertuje kolor akapitu na zielony.

Rodzaje selektorów CSS

CSS oferuje różne typy selektorów, każdy typ ma inną funkcjonalność. Ten artykuł obejmie następujące typy:

• selektor elementu
• Selektor klas
• Selektor identyfikatora
• Grupowanie selektora
• uniwersalny selektor

Selektor elementu

W CSS, selektor elementu służy do celowania w elementy HTML zgodnie z ich nazwą.

Na przykład następujący kod zaimplementuje kolor czarnego tła z zielonym kolorem tekstu do wszystkich akapitów za pomocą selektora elementów:

Selektory

Rozwój frontendowy

Rozwój zaplecza

Poniższe dane wyjściowe pokaże działanie selektora elementu CSS:

Selektor klas

Selektor klasy CSS służy do celowania w elementy HTML o określonej nazwie klasy. Składnia selektora klasy obejmuje okres (.), a następnie nazwa klasy.

.ClassName CSS-Property: wartość

W powyższej składni „ClassName” znajduje się selektor klasowy.

Zastanówmy się nad przykładem, który będzie ukierunkowany na nagłówek, oraz elementy akapitu za pomocą selektora klasy, jak pokazano w poniższym kodzie:

Selektory

Rozwój frontendowy

Rozwój zaplecza

W tym przykładzie „.Styl ”to selektor klasowy, który określa niektóre właściwości. W sekcji ciała

, i oboje

Elementy mają nazwę klasy „Styl”.

Poniższy fragment wyświetli wyjście powyższego fragmentu kodu:

Selektor identyfikatora

W CSS, Selektor identyfikatora jest skierowany do elementów HTML na podstawie atrybutu identyfikatora. Znak skrótu (#), a następnie identyfikator elementu jest używany dla Selektor identyfikatora.

Rozważmy przykład, który zaimplementuje określony styl na elemencie HTML z id = „styl”, jak pokazano poniżej:

Selektory

Rozwój frontendowy

Rozwój zaplecza

Selektor identyfikator zaimplementowany na

Element zapewni następujące dane wyjściowe:

Teraz musisz pomyśleć, jaka jest różnica między selektorem identyfikacyjnym a selektorem klasowym?

ID jest unikalnym identyfikatorem, co oznacza, że ​​po użyciu identyfikatora dla jednego elementu tego samego identyfikatora nie można użyć gdzie indziej w tym samym dokumencie. Jeśli użyjemy tego samego identyfikatora dwa razy w dokumencie, CSS zastosuje styl do najnowszej. Podczas gdy zajęcia są świetnymi klasyfikatorami, nie mają charakterystycznego charakteru.

Grupowanie selektora

Selektor grupowy celuje w wiele elementów o tym samym stylu. Używany selektor grupowy „” między wieloma selektorami.

Rozważmy przykład, który zaimplementuje ten sam styl do wielu elementów, jak pokazano w poniższym fragmencie:

Selektory

Rozwój frontendowy

Rozwój zaplecza

To jest stopka

Poniższe wyjście sprawdzi, czy selektor grupowy zastosował ten sam styl do

i elementy:

Uniwersalny selektor

uniwersalny selektor wdraża stylizację wszystkich elementów dokumentu. Znak „*” służy do wdrożenia uniwersalnego selektora. Na przykład następujący kod zastosuje dany styl na wszystkich elementach HTML:

Selektory

Rozwój frontendowy

Rozwój zaplecza

To jest stopka

Powyższy kod zaimplementuje cały dokument, w wyniku czego otrzymamy następujące dane wyjściowe:

Wniosek

Selektory CSS znajdują/kierują do elementów HTML i wdrażają na nich niektóre właściwości stylizacyjne. Istnieje wiele rodzajów selektorów CSS, ten zapis obejmował kilka z nich, takich jak selektor elementu i selektor klasowy odpowiednio na podstawie nazwy elementu i nazwy klasy elementu. Każdy typ wykonuje różne funkcje, takie jak selektor identyfikatorów niektórych działań w oparciu o identyfikator elementu, grupowanie selektora docelowe wiele elementów, uniwersalny selektor wpływa na cały dokument i tak dalej.