Czasami programiści muszą powiązać niektóre elementy HTML z wieloma klasami, a następnie zapoznać się z tymi klasami za pomocą selektorów klasy. W funkcji CSS „i” wszyscy selektory klas w elemencie stylu muszą być obecne, aby zastosować właściwości CSS do elementów. Ale w CSS ”Lub”, Dodanie dodatkowych selektorów klas może poprawnie zastosować właściwości stylu.

Zrozumiemy szczegółowo działanie CSS „i” i „lub”.

Jak zastosować funkcjonalność „i” w HTML/CSS?

CSS „I„Funkcjonalność działa w taki sposób, że stosuje właściwości CSS na elementach, gdy tylko dokładne selektory powiązane z tymi elementami są dodawane w elemencie stylu CSS. Jego funkcjonalność można wykorzystać, dodając „.”Selektor. Ponadto między selektorami klas nie powinno być żadnego miejsca.

Składnia

Składnia używania „.„Selektor jest następujący:

.Klasa 1.klasa 2.klasa3… …

Przykład: dodanie „.”Z selektorami klasy CSS

Załóżmy, że mamy następujący przykład HTML, w którym „

”Element powiązany z trzema różnymi klasami, i.mi., "Klasa 1”,„klasa 2" I "klasa3”:

CSS „i”

W powyższym fragmencie kodu:

• A "„Element tagu jest dodawany z wieloma klasami”, „Klasa 1”,„klasa 2" I "klasa3".
• Wewnątrz elementu DIV jest „

  „Kierowanie się:

.Klasa 1.klasa 2.klasa3

Text-Align: Center;
kolor niebieski;

W sekcji CSS:

• Trzy selektory klas są dodawane bez miejsca między nimi.
• W sekcji określiliśmy „tekst-align" I "kolor”Właściwości zdefiniowane dla elementu powiązanego z trzema klasami.

Właściwości CSS zostaną zastosowane do elementu. To wygeneruje następujące dane wyjściowe:

Teraz, jeśli dodamy kolejną klasę „klasa 4”W elemencie stylu CSS:

.Klasa 1.klasa 2.klasa3.klasa 4

Text-Align: Center;
kolor niebieski;

Nie będzie to stosować właściwości w „

”Element pomimo obecności wszystkich trzech powiązanych klas w elemencie stylu ze względu na dodanie dodatkowej klasy:

Jak zastosować funkcjonalność „lub” w HTML/CSS?

W CSS „Lub”Funkcjonuje w taki sposób, że stosuje właściwości CSS na wszystkich elementach powiązanych z każdą klasą dodaną w elemencie stylu CSS. Dodanie dodatkowych selektorów klas nie wpłynie na działanie selektorów. W takim przypadku selektorzy klas są oddzielone przecinkami ”,„W CSS.

Składnia

Składnia do wykorzystania funkcji „lub” jest następująca:

.Klasa 1, .klasa 2, .klasa3,… …

Można zauważyć, że „,”Dodaje się między selektorami klas.

Przykład: dodanie „” z selektorami klasy CSS

Użyjmy tego samego kodu HTML:

CSS „lub”

.Klasa 1, .klasa 2, .klasa3

Text-Align: Center;
kolor niebieski;

W elemencie stylu CSS selektory klas są dodawane przez przecinki „," między nimi.

Zastosuje to również właściwości CSS zdefiniowane w elemencie stylu CSS do elementu powiązanego z „Klasa 1”,„klasa 2" I "klasa3”:

Teraz, jeśli dodamy dodatkowy selektor klas „klasa 4”W następujący sposób:

.Klasa 1, .klasa 2, .klasa3, .klasa 4

Text-Align: Center;
kolor niebieski;

Zastosuje to właściwości do „

„Element w przeciwieństwie do CSS”I„Funkcjonalność:

To podsumowuje działanie CSS „i” i „lub”.

Wniosek

CSS „I„Działa w taki sposób, że właściwości CSS mają zastosowanie, gdy dokładna liczba i nazwy selektorów klas odnoszących się do klas elementów. CSS „Lub„Działa w taki sposób, że dodane w nim właściwości mają zastosowanie do elementów, nawet gdy dodana jest jedna nazwa klasy powiązana z elementami lub również dodawane są dodatkowe selektory klasy. Ten blog prowadził o dodaniu funkcji „i” i „lub” w HTML.