suchen

Heim >Web-Frontend >CSS-Tutorial >Was ist der Unterschied zwischen ID-Selektor und Klassenselektor in CSS?

Was ist der Unterschied zwischen ID-Selektor und Klassenselektor in CSS?

奋力向前
奋力向前Original
2021-07-09 10:53:406769Durchsuche

Vorheriger Artikel „Was ist CSS-Syntax?“ Detaillierte Einführung in die Verwendungsmethoden und -regeln》Einführung in die Verwendungsmethoden und -regeln der CSS-Syntax. Im folgenden Artikel erfahren Sie mehr über den ID-Selektor und den Klassenselektor in CSS und stellen deren Unterschiede vor. Lernen Sie gemeinsam! !

Was ist der Unterschied zwischen ID-Selektor und Klassenselektor in CSS?

Einführung in den ID-Selektor und den Klassenselektor

Die Steuerung des Stils von HTML-Elementen in CSS erfolgt über CSS-Selektoren. Die beiden am häufigsten verwendeten Selektoren sind der ID-Selektor und der Klassenselektor.

1. ID-Selektor

Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente festlegen, die mit einer bestimmten ID gekennzeichnet sind.

1, ID-Selektor wird mit „#“ definiert und beginnt mit #

1) ID-Selektor wird mit „#“ definiert

Die folgenden zwei ID-Selektoren, der erste Die Farbe des Das erste definierbare Element ist rot und die Farbe des zweiten definierten Elements ist grün: 

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

Im folgenden HTML-Code wird das p-Element mit dem id-Attribut rot und das p-Element mit dem id-Attribut rot angezeigt Grün wird in Grün angezeigt: 

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

2) Der ID-Selektor beginnt mit ##开头

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

例如：

1. #para1
2. {
3. text-align:center;
4. color:red;
5. }

二、class选择器

1、class选择器是以一个点"."号显示

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

例如：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

<html>
<head>
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

效果图：

Was ist der Unterschied zwischen ID-Selektor und Klassenselektor in CSS?

你也可以指定特定的HTML元素使用class。

例如：

在以下实例中, 所有的 p 元素使用 让该元素的文本居中。

<html>
<head>
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

效果图：

Was ist der Unterschied zwischen ID-Selektor und Klassenselektor in CSS?

class选择器可以被多个html元素使用，因为元素的class属性没有必要保证唯一性。另外一个html元素也可以有多个class属性值，值之间用","号隔开。如<p class="cls1,cls2"></p>是可以的。

id与class的最基本区别

  • id前面应该加前缀符号"#"，而class前面应该加前缀符号".

    • Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind.

  • HTML-Elemente verwenden das id-Attribut, um den ID-Selektor festzulegen, und der ID-Selektor wird in CSS mit „#“ definiert.

  • Zum Beispiel:

    rrreee
    • 2. Klassenauswahl

  • 1. Die Klassenauswahl beginnt mit einem Punkt „. „Das Symbol zeigt

    🎜🎜🎜🎜🎜🎜Klassenselektor wird verwendet, um den Stil einer Gruppe von Elementen zu beschreiben. Der Klassenselektor unterscheidet sich vom ID-Selektor. Klasse kann in mehreren Elementen verwendet werden. 🎜🎜Der Klassenselektor wird in HTML durch das Klassenattribut dargestellt. In CSS wird der Klassenselektor mit einem Punkt „.“ angezeigt. 🎜🎜🎜Zum Beispiel: 🎜🎜🎜Im folgenden Beispiel sind alle HTML-Elemente mit der Center-Klasse zentriert. 🎜rrreee🎜🎜🎜🎜🎜🎜Rendering: 🎜🎜🎜WeChat Screenshot_20210709095718.jpg🎜🎜Sie können mithilfe der Klasse auch bestimmte HTML-Elemente angeben. 🎜🎜🎜Zum Beispiel: 🎜🎜🎜Im folgenden Beispiel werden alle p -Elemente verwendet, um den Text dieses Elements zu zentrieren. 🎜rrreee🎜🎜Rendering: 🎜🎜🎜🎜 WeChat Screenshot_20210709095834.jpg🎜🎜🎜Der Klassenselektor kann von mehreren HTML-Elementen verwendet werden, da das Klassenattribut des Elements nicht erforderlich ist, um die Eindeutigkeit sicherzustellen. Ein anderes HTML-Element kann auch mehrere Klassenattributwerte haben, und die Werte werden durch „,🎜“ getrennt. Beispielsweise ist <p class="cls1,cls2"></p> in Ordnung. 🎜

    Der grundlegendste Unterschied zwischen 🎜id und class🎜🎜

      🎜🎜id sollte ein Präfixsymbol vorangestellt werden"#“ und das Präfixsymbol „<code>.“ sollte vor der Klasse hinzugefügt werden. 🎜🎜🎜🎜Das ID-Attribut kann im Allgemeinen nur einmal auf einer Seite verwendet werden, während auf die Klasse mehrmals verwiesen werden kann. 🎜🎜🎜🎜id wird als Tag eines Elements verwendet, um verschiedene Strukturen und Inhalte zu unterscheiden, während class ein Stil ist, der auf jede Struktur und jeden Inhalt angewendet werden kann. 🎜🎜🎜🎜 In Bezug auf Layoutideen halten wir uns im Allgemeinen an dieses Prinzip: Die ID bestimmt zuerst die Struktur und den Inhalt der Seite und definiert dann einen Stil dafür. Im Gegenteil, die Klasse definiert zuerst einen Stiltyp und dann Fügt es nach Bedarf zur Seite hinzu. Wenden Sie Klassenstile auf verschiedene Elemente und Inhalte an. 🎜🎜🎜🎜Derzeit erlauben Browser die Anzeige mehrerer IDs mit demselben Attributwert auf derselben Seite. Bei der Verwendung von JavaScript zur Steuerung von Elementen über IDs treten jedoch Fehler auf. 🎜

  • In der tatsächlichen Anwendung wird die Klasse eher in Textabschnitten und Seitendekorationen usw. verwendet, während die ID eher zur Implementierung großer Layouts und zum Entwerfen von enthaltenden Blöcken oder Stilen von enthaltenden Boxen verwendet wird.

Zusammenfassung: In CSS ist die ID-Selektor und Klassenselektor werden verwendet, um Elementen Farbe hinzuzufügen. Sie machen unsere gesamte Seite bunt.

Hinweise

  • ID-Attribute beginnen nicht mit einer Zahl. IDs, die mit Zahlen beginnen, funktionieren in Mozilla/Firefox-Browsern nicht.

  • ID-Attribute können nur einmal in jedem HTML-Dokument vorkommen Zeichen des Klassenselektors dürfen keine Zahlen verwenden! Es funktioniert nicht in Mozilla oder Firefox.

  • Seien Sie vorsichtig


  • Empfohlenes Lernen:

    CSS-Video-Tutorial

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS schöne Bildlaufleistenstile anpassen!Nächster Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS schöne Bildlaufleistenstile anpassen!

In Verbindung stehende Artikel

Mehr sehen