Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist die Kennung des ID-Selektors in CSS?

Was ist die Kennung des ID-Selektors in CSS?

青灯夜游
青灯夜游Original
2022-09-22 15:57:513880Durchsuche

In CSS ist die Kennung des ID-Selektors „#“. Sie können einen bestimmten Stil für das HTML-Element angeben, das mit einem bestimmten ID-Attributwert markiert ist. Die Syntaxstruktur ist „#ID-Wert {Attribut: Attributwert;}“. . Das ID-Attribut ist auf der gesamten Seite eindeutig und nicht wiederholbar; der ID-Attributwert sollte nicht mit einer Zahl beginnen. IDs, die mit Zahlen beginnen, funktionieren in Mozilla/Firefox-Browsern nicht.

Was ist die Kennung des ID-Selektors in CSS?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente festlegen, 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.

Die Syntaxstruktur ist wie folgt:

#ID {
  属性 : 属性值;
}

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

Was ist die Kennung des ID-Selektors in CSS?

Im folgenden HTML-Code wird das p-Element mit dem ID-Attribut rot in Rot angezeigt, und das p-Element mit dem ID-Attribut ist grün wird in Grün angezeigt:

Was ist die Kennung des ID-Selektors in CSS?

Es ist erwähnenswert:

  • Das ID-Attribut ist das einzige nicht wiederholbare auf der gesamten Seite.

    Ein ID-Wert kann nur einmal in einem HTML-Dokument vorkommen, d. h. eine ID kann nur ein Element eindeutig identifizieren (kein Elementtyp, sondern ein Element).

    Das heißt, die ID des Elements ist auf der Seite eindeutig, daher wird der ID-Selektor verwendet, um ein eindeutiges Element auszuwählen!

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

ID-Selektor und abgeleiteter Selektor

In modernem Layout wird ID-Selektor häufig zum Erstellen verwendet abgeleitete Selektoren.

Was ist die Kennung des ID-Selektors in CSS?

Der obige Stil wird nur auf Absätze angewendet, die innerhalb des Elements erscheinen, dessen ID „Sidebar“ ist. Bei diesem Element handelt es sich höchstwahrscheinlich um eine Div- oder Tabellenzelle, es kann sich jedoch auch um eine Tabelle oder ein anderes Element auf Blockebene handeln. Es kann sogar ein Inline-Element wie oder sein, aber diese Verwendung ist illegal, da es nicht in das Inline-Element eingebettet werden kann. p>.

Ein Selektor für mehrere Verwendungszwecke

Auch wenn das als Seitenleiste markierte Element nur einmal im Dokument erscheinen kann, kann dieser ID-Selektor viele Male als abgeleiteter Selektor verwendet werden:

Was ist die Kennung des ID-Selektors in CSS?

Hier, Was ist offensichtlich anders? Der Unterschied zu anderen p-Elementen auf der Seite besteht darin, dass das p-Element in der Seitenleiste eine Sonderbehandlung erhalten hat. Gleichzeitig unterscheidet es sich offensichtlich von allen anderen h2-Elementen auf der Seite, dass auch das h2-Element in der Seitenleiste eine andere Sonderbehandlung erhalten hat Behandlung.

Separater Selektor

Der ID-Selektor kann unabhängig funktionieren, auch wenn er nicht zum Erstellen eines abgeleiteten Selektors verwendet wird:

Was ist die Kennung des ID-Selektors in CSS?

Gemäß dieser Regel hat das Element mit der ID-Seitenleiste einen ein Pixel breiten schwarzen gepunkteten Rand , und es wird eine 10 Pixel breite Auffüllung (Auffüllung, Inhalt leer) um ihn herum angezeigt. Ältere Versionen von Windows-/IE-Browsern ignorieren diese Regel möglicherweise, es sei denn, Sie definieren speziell das Element, zu dem dieser Selektor gehört:

Was ist die Kennung des ID-Selektors in CSS?

(Lernvideo-Sharing: Web-Frontend)

Das obige ist der detaillierte Inhalt vonWas ist die Kennung des ID-Selektors 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