A volte, gli sviluppatori devono associare alcuni elementi HTML a più classi e quindi fare riferimento a quelle classi usando selettori di classi. Nella funzionalità CSS "e", tutti i selettori di classe nell'elemento di stile devono essere presenti per applicare le proprietà CSS agli elementi. Ma, nel CSS "O", L'aggiunta di selettori di classe extra può applicare correttamente le proprietà di stile.

Comprendiamo il funzionamento di CSS "e" e "o" in dettaglio.

Come applicare la funzionalità "e" in HTML/CSS?

Il CSS "E"La funzionalità funziona in modo tale da applicare le proprietà CSS sugli elementi quando solo gli esatti selettori associati a tali elementi vengono aggiunti nell'elemento in stile CSS. La sua funzionalità può essere utilizzata aggiungendo "."Selettore. Inoltre, non dovrebbe esserci spazio tra i selettori di classe.

Sintassi

La sintassi dell'uso del "."Il selettore è il seguente:

.Classe1.Classe2.Class3… …

Esempio: aggiunta "."Con i selettori di classe CSS

Supponiamo che abbiamo il seguente esempio HTML in cui "

"Elemento associato a tre diverse classi, i.e., "Classe1","Classe2" E "Classe3":

CSS "e"

Nel frammento di codice sopra:

• UN ""L'elemento tag viene aggiunto con più classi,"Classe1","Classe2" E "Classe3".
• All'interno dell'elemento Div c'è un "

  " intestazione:

.Classe1.Classe2.Classe3

Testo-align: centro;
colore blu;

Nella sezione CSS:

• I selettori di tre classi vengono aggiunti senza spazio tra loro.
• Con la sezione, abbiamo specificato "allineamento" E "colore"Proprietà definite per l'elemento associato alle tre classi.

Le proprietà CSS verranno applicate all'elemento. Questo genererà il seguente output:

Ora, se aggiungiamo un'altra classe "Classe4"Nell'elemento in stile CSS:

.Classe1.Classe2.Classe3.Classe4

Testo-align: centro;
colore blu;

Questo non applicherà proprietà sul "

"Elemento nonostante la presenza di tutte e tre le classi correlate nell'elemento di stile a causa dell'aggiunta di una classe extra:

Come applicare la funzionalità "o" in HTML/CSS?

In CSS, "O"Funzioni in modo tale da applicare le proprietà CSS su tutti gli elementi associati a ciascuna classe aggiunta nell'elemento in stile CSS. L'aggiunta di selettori di classe extra non influirà sul funzionamento dei selettori. In questo caso, i selettori di classe sono separati con le virgole ","In CSS.

Sintassi

La sintassi per utilizzare la funzionalità "o" è la seguente:

.Classe1, .Classe2, .Class3, ... …

Si può osservare che ","Viene aggiunto tra i selettori di classe.

Esempio: aggiunta "," con i selettori di classe CSS

Usiamo lo stesso codice HTML:

CSS "o"

.Classe1, .Classe2, .Classe3

Testo-align: centro;
colore blu;

Nell'elemento in stile CSS, i selettori di classe vengono aggiunti separati dalle virgole "," fra loro.

Ciò applicherà anche le proprietà CSS definite all'interno dell'elemento in stile CSS all'elemento associato a "Classe1","Classe2" E "Classe3":

Ora, se aggiungiamo un selettore di classe aggiuntivo "Classe4" come segue:

.Classe1, .Classe2, .Classe3, .Classe4

Testo-align: centro;
colore blu;

Ciò applicherà le proprietà al "

"Elemento a differenza di CSS"E"Funzionalità:

Questo riassume il funzionamento di CSS "e" e "o".

Conclusione

Il CSS "E"Funziona in modo tale che le proprietà CSS si applicino quando vengono aggiunti il ​​numero esatto e i nomi dei selettori di classe che si riferiscono alle classi degli elementi. Il CSS "O"Funziona in modo tale che le proprietà aggiunte in esso si applicino agli elementi anche quando viene aggiunto un nome a singola classe associato agli elementi o anche se vengono aggiunti alcuni selettori di classe aggiuntivi. Questo blog ha guidato sull'aggiunta della funzionalità "e" e "o" in HTML.