CSS zapewnia wiele sposobów modyfikacji wyglądu elementu. Selektory CSS są jednym z nich, selektory umożliwiają nam ukierunkowanie elementu HTML i określić wybrany styl na dowolnym elemencie HTML.

W CSS istnieje pięć kategorii selektorów i.mi. Prosty, kombinator, pseudoklasa, pseudoelement i selektor atrybutów. Ten zapis przedstawia szczegółowy przegląd jednego z prostych selektorów i.mi. Selektor klas i będzie omawiać następujące terminologie związane z selektorem klasy:

• Co to jest selektor klasowy
• Podstawowa składnia selektora klasy
• Jak korzystać z selektora klasy
• Jak korzystać z selektora klasy dla niektórych konkretnych elementów HTML

Zacznijmy tę dyskusję z podstawową definicją selektora klas:

Selektor klas w CSS

Selektor klas jest ukierunkowany na elementy o określonych nazwach klas. Poniższa składnia zapewni większą jasność co do selektora klasy.

Składnia

Podstawowa składnia zaczyna się od kropki „.”Po nazwie klasy, która reprezentuje, że jest to selektor klasowy.

Na powyższym rysunku „.”Pokazuje, że jest to selektor klas CSS,„ styl ”reprezentuje nazwę klasy.

Jak korzystać z selektora klasy CSS

Do ustawienia stylu niektórych konkretnych elementów HTML można użyć selektora CSS.

Przykład

Rzućmy okiem na kod poniżej, wykorzystuje selektor klas do stylizowania niektórych konkretnych elementów HTML.

Selektor klasy CSS

Pierwszy paragraf

Akapit drugi

Powyższy kod wykorzystuje dwóch selektorów klasy.

i pierwszy

Element używa tej samej klasy, więc ten sam styl zostanie zaimplementowany, a drugi

element będzie stylizowany inaczej:

Jak korzystać z selektora klasy CSS dla określonych elementów HTML

Możemy użyć selektora klasy CSS, aby wpłynąć na określone elementy HTML. W tym celu musimy określić nazwę elementu przed DOT „.”, Jak pokazano na poniższym rysunku:

Powyższy rysunek opisuje, że wybierają wszystkie

elementy mające „Styl” klasy i ustawiaj kolor tła jako niebieski.

Przykład

W tym przykładzie określono klasę styl1

I

elementy. Jednak tylko

Elementy mające atrybut klasy „Style1” mogą uzyskać dostęp do właściwości stylistyki Style1 i

Element pozostanie niestety.

Selektor klasy CSS

Pierwszy paragraf

Akapit drugi

Wyjście

Jak zaimplementować wiele stylów na elemencie HTML

Jako element HTML może mieć wiele nazw klas w swoim atrybucie klasowym, abyśmy mogli zastosować różne styl w oparciu o nazwy klas.

Przykład

W poniższym kodzie pierwszy akapit zaimplementuje właściwości obu klas stylu.

Selektor klasy CSS

Pierwszy paragraf

Akapit drugi

Powyższy kawałek kodu wygeneruje następujące dane wyjściowe:

Wyjście weryfikuje, że pierwszy akapit wykorzystuje właściwości obu klas „Style” i „Style1”.

Wniosek

Selektor klasy wybiera element HTML do stylizacji w CSS za pomocą nazwy klasy i zaczyna się od kropki „.”Następnie nazwa klasy. Ten zapis przedstawia kompleksowy przegląd i podstawowa koncepcja selektorów klas CSS, jak korzystać z selektorów klas, jak korzystać z selektora klasy dla niektórych konkretnych elementów HTML za pomocą przykładów.