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>
css
css-selectors
Larsenal
quelle
quelle
img#Inbox
Symbol auf Ihrer Seite, das normalerweise auf 50% Deckkraft eingestellt ist. Wenn der Benutzer jedoch eine Nachricht hat, soll diese auf 100% Deckkraft gesetzt werden, und das Backend zeigt dies an, indemactive
dem Element eine Klasse hinzugefügt wird . In einem solchen Szenario ist es sinnvoll, einen Selektor zu haben, der sowohl ID als auch Klassennamen kombiniert.code
wünschen , also kann ich Folgendes tun: <p id = Produkt_1 Klasse = Produkt> Produkt 1 </ p> <p id = Produkt_2 Klasse = Produkt> Produkt 2 </ p>code
Dies ermöglicht das allgemeine Styling aller Produkte, aber auch das individuelle Styling für bestimmte Produkte?Antworten:
In Ihrem Stylesheet:
Bearbeiten: Dies könnte auch helfen:
und nach Ihrem Beispiel:
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.myClass
ist schneller alsdiv#content.myClass
weil der tagName einen Filterschritt hinzufügt, den Sie nicht benötigen. Verwenden Sie tagNames nur in Selektoren, wo Sie müssen!quelle
div.class#id
sollte gleichwertig sein, obwohl weniger empfohlen; Verwenden Sie zuerst eindeutigere Teile des Selektors.Es gibt Unterschiede zwischen
#header .callout
und#header.callout
in 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 sindheader
.Und
#header.callout
bedeutet:Wählen Sie das Element aus, das eine ID von
header
und auch einen Klassennamen von hatcallout
.Sie können hier mehr CSS-Tricks lesen
quelle
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:
Sie brauchen das nicht
div
vor 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:
Sinn ergeben?
quelle
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:
quelle
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.
quelle
Verwenden Sie:
tag.id ; tag#class
in den Tag-Variablen in Ihrem CSS.quelle
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 zuweisen
class="class1 class2"
quelle
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.
quelle
Funktioniert nicht, wenn der Doctype HTML 4.01 ist ...
quelle