CSS-ID-Selektor

[Einführung] ID-Selektor Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind. Der ID-Selektor wird mit „“ definiert. Die folgenden zwei ID-Selektoren, der erste kann die Farbe des Elements als Rot und der zweite die Farbe des Elements als Grün definieren: rot {color:re

id selector

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

Der ID-Selektor wird mit „#“ definiert.

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:

#red {color :red;} Das Attribut Grün wird in Grün angezeigt.

Dieser Absatz ist rot.

Dieser Absatz ist grün.

Hinweis: Das id-Attribut kann nur einmal pro HTML-Dokument vorkommen. Um herauszufinden, warum, lesen Sie XHTML: Website Refactoring.

ID-Selektoren und abgeleitete Selektoren

In modernen Layouts werden ID-Selektoren häufig zum Erstellen abgeleiteter Selektoren verwendet.

#sidebar p {

font-style: italic;
text-align: right;

margin-top: 0.5em;

}


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 ein p oder eine Tabellenzelle, obwohl es sich auch um eine Tabelle oder ein anderes Element auf Blockebene handeln könnte. Es kann sogar ein Inline-Element wie oder sein, eine solche Verwendung ist jedoch illegal, da es nicht innerhalb eines Inline-Elements verwendet werden kann ;p> (falls Sie vergessen haben, warum, siehe XHTML: Website-Refactoring).

Ein Selektor, mehrere Verwendungszwecke

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

#sidebar p {

Schriftstil: kursiv;
text-align: right;

margin-top: 0.5em;

}

#sidebar h2 {
Schriftgröße: 1em;
Schriftstärke: normal;

Schriftstil: kursiv;

Rand: 0;
Zeilenhöhe: 1,5;
Text- align: right;
}


Was sich hier offensichtlich von anderen p-Elementen auf der Seite unterscheidet, ist, dass das p-Element in der Seitenleiste im Gegensatz zu allen anderen h2-Elementen speziell behandelt wurde h2-Elemente in der Seitenleiste erhalten ebenfalls eine unterschiedliche Sonderbehandlung.

Separate Selektoren

Der ID-Selektor kann unabhängig funktionieren, auch wenn er nicht zum Erstellen abgeleiteter Selektoren verwendet wird:

#sidebar {

border : 1px dotted #000;
padding: 10px;

}

Gemäß dieser Regel hat das Element mit der ID der Seitenleiste einen pixelbreiten schwarzen gepunkteten Rand und gleichzeitig Es wird von einer 10-Pixel-Auffüllung (interner Leerraum) umgeben. Ä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:

p#sidebar {

border: 1px dotted #000;

padding: 10px;

}

Das obige ist der detaillierte Inhalt vonCSS-ID-Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!