Wie kombiniere ich Klasse und ID in der CSS-Auswahl?

Wenn ich folgendes div habe:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

Gibt es eine Möglichkeit, einen Stil zu definieren, der die Idee "Ein Div mit id='content'UND class='myClass'" ausdrückt ?

Oder haben Sie einfach den einen oder anderen Weg wie in

<div class="content-sectionA">
    Lorem Ipsum...
</div>

Oder

<div id="content-sectionA">
    Lorem Ipsum...
</div>

In Ihrem Stylesheet:

div#content.myClass

Bearbeiten: Dies könnte auch helfen:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

und nach Ihrem Beispiel:

div#content.sectionA

Bearbeiten, 4 Jahre später: Da diese Super alt ist und die Menschen halten , es zu finden: nicht den Tag - Namen in Ihren Selektoren verwenden. #content.myClassist schneller als div#content.myClassweil der tagName einen Filterschritt hinzufügt, den Sie nicht benötigen. Verwenden Sie tagNames nur in Selektoren, wo Sie müssen!

Es gibt Unterschiede zwischen #header .calloutund #header.calloutin CSS.

Hier ist das "einfache Englisch" von #header .callout:
Wählen Sie alle Elemente mit dem Klassennamen aus callout, die Nachkommen des Elements mit der ID von sind header.

Und #header.calloutbedeutet:
Wählen Sie das Element aus, das eine ID von headerund auch einen Klassennamen von hat callout.

Sie können hier mehr CSS-Tricks lesen

Es ist nichts Falsches daran, eine ID und eine Klasse für ein Element zu kombinieren, aber Sie sollten es für eine Regel nicht durch beide identifizieren müssen. Wenn Sie wirklich wollen, können Sie tun:

#content.sectionA{some rules}

Sie brauchen das nicht divvor der ID, wie andere vorgeschlagen haben.

Im Allgemeinen sollten CSS-Regeln, die für dieses Element spezifisch sind, mit der ID festgelegt werden, und diese haben ein höheres Gewicht als die der Klasse. Von der Klasse angegebene Regeln sind Eigenschaften, die für mehrere Elemente gelten, die Sie nicht an mehreren Stellen ändern möchten, wenn Sie Anpassungen vornehmen müssen.

Das läuft darauf hinaus:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

Sinn ergeben?

Im Allgemeinen sollten Sie ein durch id angegebenes Element nicht klassifizieren müssen, da id immer eindeutig ist. Wenn dies jedoch wirklich erforderlich ist, sollte Folgendes funktionieren:

div#content.sectionA {
    /* ... */
}

Sie können ID und Klasse in CSS kombinieren, aber IDs sollen eindeutig sein. Wenn Sie also eine Klasse zu einem CSS-Selektor hinzufügen, wird diese überqualifiziert.

Verwenden Sie: tag.id ; tag#classin den Tag-Variablen in Ihrem CSS.

IDs sollten im gesamten Dokument eindeutig sein, daher sollten Sie sie nicht basierend auf beiden auswählen müssen. Sie können einem Element jedoch mehrere Klassen zuweisenclass="class1 class2"

Ich denke du liegst alle falsch. IDs versus Klasse sind keine Frage der Spezifität. Sie haben völlig unterschiedliche logische Verwendungen.

IDs sollten verwendet werden, um bestimmte Teile einer Seite zu identifizieren: die Kopfzeile, die Navigationsleiste, den Hauptartikel, die Autorenzuordnung und die Fußzeile.

Klassen sollten verwendet werden, um Stile auf die Seite anzuwenden. Angenommen, Sie haben eine allgemeine Magazinseite. Jede Seite der Site enthält dieselben Elemente - Kopfzeile, Navi, Hauptartikel, Seitenleiste, Fußzeile. Aber Ihre Zeitschrift hat verschiedene Bereiche - Wirtschaft, Sport, Unterhaltung. Sie möchten, dass die drei Bereiche unterschiedlich aussehen - konservativ und quadratisch, sportlich, sportlich, hell und jung.

Sie verwenden dafür Klassen. Sie möchten nicht mehrere IDs erstellen müssen - # Wirtschaftsartikel und # Sportartikel und # Unterhaltungsartikel. Das macht keinen Sinn. Stattdessen definieren Sie drei Klassen: Wirtschaft, Sport und Unterhaltung und definieren dann jeweils die IDs #nav, #article und #footer.

.sectionA[id='content'] { color : red; }

Funktioniert nicht, wenn der Doctype HTML 4.01 ist ...