Wann werden Klasse und ID in CSS verwendet?

Wenn der CSS-Stil auf mehr als ein Element angewendet wird, verwenden Sie class, um ihn zu definieren; wenn der CSS-Stil nur auf ein Element angewendet wird, verwenden Sie id, um ihn zu definieren. Grund: Die ID kann nicht wiederholt und nur einmal verwendet werden. Eine ID kann nur für ein Etikettenelement verwendet werden, und dieselbe Klasse kann für mehrere Etikettenelemente definiert werden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Tutorial-Empfehlung: CSS-Video-Tutorial

Zusätzlich zu den Selektoren in CSS können Sie vordefinierte HTML-Tags wie 3499910bf9dac5ae3c52d5ede7383485, e388a4556c0f65e1904146cc1a846bee, dc6dce4a544fdca2df29d5ac0ea9906b auswählen. Sie können auch eine benutzerdefinierte ID oder Klasse auswählen. Der Hauptunterschied zwischen ID und Klasse besteht darin, dass ID nicht wiederholt werden kann und nur einmal verwendet werden kann. Eine ID kann nur für ein Etikett verwendet werden. Klassen können wiederverwendet werden und dieselbe Klasse kann für mehrere Tags definiert werden. Tatsächlich ist der Unterschied zwischen ID und Klasse daran zu erkennen, dass ID der Bezeichner und Klasse die Klasse ist.

Wann sollte also die ID und wann die Klasse verwendet werden?

• Wenn der CSS-Stil für mehr als ein Element verwendet wird, verwenden Sie die Klasse, um ihn zu definieren.
  

• Wenn der CSS-Stil nur auf ein Element angewendet wird, verwenden Sie die ID, um ihn zu definieren.

Zum Beispiel eine Navigationsleiste auf jeder Seite, können Sie sie mit id definieren

<nav id="nav"></nav>
// 或者
<div id="nav"></div>

Zum Beispiel hat eine Produktliste den gleichen Stil und kann mit der Klasse definiert werden

<ul id="list">
    <li class="list-item">1</li>
    <li class="list-item">2</li>
    <li class="list-item">3</li>
</ul>

Mehr zum Thema Programmierung. Weitere Informationen finden Sie unter: Programmierlehre! !

Das obige ist der detaillierte Inhalt vonWann werden Klasse und ID in CSS verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!