Was ist der Unterschied zwischen CSS-Klasse und ID-Selektor?

Unterschiede: 1. Der Stilselektor „#“ wird verwendet, wenn id CSS entspricht; während der Stilselektor „.“ verwendet wird, wenn Klasse CSS entspricht. 2. Die Klasse kann auf der Seite wiederverwendet werden. Die ID kann jedoch nur einmal auf der Seite angezeigt werden, sodass sie nicht wiederverwendet werden kann.

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

CSS-ID- und Klassenselektoren

Wenn Sie CSS-Stile in HTML-Elementen festlegen möchten, müssen Sie die „id“- und „class“-Selektoren im Element festlegen.

id-Selektor

id-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind. Das HTML-Element verwendet das id-Attribut, um den ID-Selektor festzulegen, und der ID-Selektor in CSS wird mit „#“ definiert. #" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点".

Für die beiden ID-Selektoren unten kann der erste die Farbe des Elements als Rot und der zweite die Farbe des Elements als Grün definieren:

.center {text‐align: center}

Im HTML-Code unten kann das p-Element mit dem Das ID-Attribut von Rot wird in Rot angezeigt, und das p-Element, dessen ID-Attribut grün ist, wird in Grün angezeigt.

p.center {text‐align:center;}

KlassenselektorKlassenselektor wird verwendet, um den Stil einer Gruppe von Elementen zu beschreiben. Der Klassenselektor unterscheidet sich vom ID-Selektor und kann in mehreren Elementen verwendet werden. Der Klassenselektor wird in HTML durch das Klassenattribut dargestellt. In CSS wird der Klassenselektor mit einem Punkt „.“ angezeigt: rrreee

Im obigen Beispiel sind es alle HTML-Elemente mit der Mittelklasse Zentriert.

Natürlich können Sie auch bestimmte HTML-Elemente mithilfe von Klassen angeben. Im folgenden Beispiel verwenden alle p-Elemente class="center", um den Text des Elements zu zentrieren:

rrreee

Der Unterschied zwischen ID und Klasse in CSS

1. Syntaxunterschied:

Das entsprechende CSS für id verwendet den Stilselektor „#“ (Nummernzeichen).

Klasse entspricht CSS mit dem Stilselektor „.“ (englischer halbbreiter Eingabezeitraum).

2. Unterschied in der Anzahl der Verwendungen:

Klasse kann auf der Seite wiederverwendet werden, 🎜🎜id kann nur einmal auf der Seite erscheinen, daher kann es nicht wiederverwendet werden, 🎜🎜versuchen Sie also, es in der Klasse so zu schreiben, dass es kann auf der Seite wiederholt werden. Zitieren Sie das von Ihnen geschriebene CSS, um den Arbeitsaufwand und die Codemenge zu reduzieren. 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen CSS-Klasse und ID-Selektor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!