Was ist der Unterschied zwischen der CSS-Selektorklasse und der ID? id- und Klassenverwendung in HTML

Was ist der Unterschied zwischen der CSS-Selektorklasse und der ID? id- und Klassenverwendung in HTML

Chen Weiliangkürzlich hingerichtetSEO, optimieren Sie die WebsiteWordPressThema.

Ich habe zwar schon einige grundlegende HTML- und CSS-Kenntnisse gelernt, aber ich habe es eine Weile nicht bedient, insbesondere die Verwendung des CSS-Teils, das vergisst man leicht.

Zeichnen Sie also den Unterschied und die Verwendung der CSS-Selektor-ID und -Klasse hier auf und fassen Sie ihn zusammen:

• id entspricht #div
• Klasse entspricht .div

Der Unterschied zwischen ID und Klasse

ID-Beschreibung

• id ist ein festes Tag, das verwendet wird, um den größeren Stil auf der Webseite zu definieren, der in Form von #div definiert ist
• Zum Beispiel: Trennsäulen, Top, Body, Bottom, etc...
• Wird verwendet, um ein bestimmtes Element zu definieren, das nur einmal pro Seite erscheinen und nicht wiederholt aufgerufen werden kann.

Klassenbeschreibung

• Klasse ist eine Stilgruppe, die verwendet wird, um die detaillierten Stile in der Webseite zu definieren.Sie wird in Form von .div definiert und kann wiederholt werden.
• Zum Beispiel: ein bestimmtes Menü, eine Textzeile usw.
• Auf derselben Seite kann es wiederholt von mehreren Elementen aufgerufen werden

Der div-Selektor selbst hat keine Eigenschaften, sondern steuert durch die Definition seines CSS einige Layouts wie Breite, Höhe, Hintergrundfarbe und Textgröße des div.

GeneralE-CommerceWebseite,eine Webseite bauenDie vom Programm generierte HTML-Webseite soll das Seitenlayout über CSS realisieren.

Was ist ein Selektor?

Die Definition jedes CSS-Stils besteht aus 2 Teilen:

选择器 {样式}

• Der Teil vor dem {} ist der "Selektor".
• Der "Selektor" gibt den "Stil" von {} an, auf den er wirkt.
• Das heißt, auf welchem ​​Element der Webseite funktioniert dieser „Stil“?

Codebeispiel

So wählen Sie ein class="sidebar"-Element aus und gestalten es:

.sidebar
{ 
background-color:black;
}

So wählen Sie ein Element mit id="footer" aus und gestalten es:

#footer
{ 
background-color:black;
}