Wie kann ich ein Element basierend auf seiner ID und Klasse in CSS formatieren?

Klasse und ID in CSS-Selektoren kombinieren

Es kann vorkommen, dass Sie Elemente basierend auf ihren Klassen- und ID-Attributen formatieren müssen. Während es einfach ist, jeweils ein Attribut zu verwenden, kann es verwirrend wirken, sie zu kombinieren.

Betrachten wir den folgenden HTML-Code:

<div class="sectionA">
<p><strong>Ist es möglich, einen Stil zu definieren, der gilt speziell für „ein div mit></strong></p>
<p>Es gibt zwei Möglichkeiten, dies zu erreichen Dies:</p>
<ol><li>
<strong>Verwenden Sie einen kombinierten ID- und Klassenselektor:</strong> Schreiben Sie in Ihr Stylesheet Folgendes:</li></ol>
<pre class="brush:php;toolbar:false">div#content.myClass

Diese Syntax bedeutet, dass die Die Regel gilt für

-Elemente, die sowohl den ID-Attributwert „content“ als auch den Klassenattributwert haben „meineKlasse“.

2. Erstellen Sie einen Klassennamen, der beide Bezeichner kombiniert: Anstatt separate Klassen- und ID-Attribute zu verwenden, können Sie einen einzelnen Klassennamen erstellen, der die gewünschte Kombination darstellt. Sie könnten beispielsweise Folgendes verwenden:

<div class="content-sectionA">
<p>Dieser Ansatz kombiniert die Funktionalität sowohl der ID als auch der Klassenattribute in einem einzigen Bezeichner.</p>
<p><strong>Hinweis:</strong></p>
<ul>
<li>Sie können mehrere Klassennamen oder ID-Selektoren verketten, um spezifischere Kombinationen anzugeben.</li>
<li>In modernen Browsern Die Verwendung des Tag-Namens in Selektoren ist aus Performance-Gründen nicht erforderlich. Es wird jedoch empfohlen, es sparsam zu verwenden.</li>
</ul>
</div>