So verwenden Sie CSS-Klassen und ID-Selektoren

In CSS wird der Klassenselektor verwendet, um Elemente mit einer bestimmten Klasse (Klasse) auszuwählen, die durch einen Punkt dargestellt wird, und die Syntax lautet „.specified class {style attribute: style attribute value;}“. Der ID-Selektor wird verwendet, um einen bestimmten Stil für das mit einer bestimmten ID gekennzeichnete HTML-Element anzugeben. Er wird mit „#“ definiert und die Syntax lautet „#spezifischer ID-Wert {spezifisches Attribut: spezifischer Attributwert;}“.

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

So verwenden Sie CSS-Klassen- und ID-Selektoren

Klassenselektor

. Der Klassenselektor wählt Elemente mit einer bestimmten Klasse (Klasse) aus.

In CSS wird der Klassenselektor mit einem Punkt angezeigt:

.center {text-align: center}

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

Im folgenden HTML-Code haben sowohl h1- als auch p-Elemente die Center-Klasse. Das bedeutet, dass beide die Regeln im „.center“-Selektor respektieren.

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

Hinweis: Zahlen können nicht als erstes Zeichen des Klassennamens verwendet werden! Es funktioniert nicht in Mozilla oder Firefox.

Like id, class kann auch als abgeleiteter Selektor verwendet werden:

.fancy td {
color: #f60;
background: #666;
}

Im obigen Beispiel zeigen die Tabellenzellen innerhalb des größeren Elements mit dem Klassennamen fancy orangen Text mit grauem Hintergrund an. (Ein größeres Element mit dem Namen fancy könnte eine Tabelle oder ein Div sein)

Elemente können auch basierend auf ihrer Klasse ausgewählt werden:

td.fancy {
color: #f60;
background: #666;
}

Im obigen Beispiel wäre eine Tabellenzelle mit dem Klassennamen fancy Orange auf grauem Hintergrund.

<td class="fancy">

Sie können jedem Tabellenelement so oft die Klasse Fancy zuweisen, wie Sie möchten. Mit Fancy markierte Zellen sind orange mit grauem Hintergrund. Zellen, denen keine Klasse namens fancy zugewiesen ist, sind von dieser Regel nicht betroffen. Es ist auch erwähnenswert, dass Absätze mit der Klasse „Fancy“ nicht orange mit einem grauen Hintergrund sind und natürlich alle anderen als „Fancy“ gekennzeichneten Elemente von dieser Regel nicht betroffen sind. Dies ist alles auf die Art und Weise zurückzuführen, wie wir diese Regel geschrieben haben. Der Effekt ist auf Tabellenzellen beschränkt, die als ausgefallen markiert sind (d. h. die Verwendung des td-Elements zur Auswahl der ausgefallenen Klasse).

ID-Selektor

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

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;}
#green {color:green;}

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 id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

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

ID-Selektor und abgeleiteter Selektor

In modernen Layouts wird der ID-Selektor 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 in Elementen mit der ID der Seitenleiste erscheinen. Bei diesem Element handelt es sich höchstwahrscheinlich um eine Div- oder Tabellenzelle, es könnte sich jedoch auch um eine Tabelle oder ein anderes Element auf Blockebene handeln. 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, mehrfach verwendbar

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

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

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

Separate Selektoren

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

#sidebar {
border: 1px dotted #000;
padding: 10px;
}

Gemäß dieser Regel hat das Element mit der ID-Seitenleiste einen ein Pixel breiten schwarzen Punktrand. und es wird eine 10 Pixel breite Polsterung darum herum sein. Ä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:

div#sidebar {
border: 1px dotted #000;
padding: 10px;
}

(Freigabe von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Klassen und ID-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!