Wie Klasse und ID in CSS-Selektor kombinieren?

StackOverflow https://stackoverflow.com/questions/1028248

  •  06-07-2019
  •  | 
  •  

Frage

Wenn ich habe folgendes div: 

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

Gibt es eine Möglichkeit, einen Stil zu definieren, die die Idee "A div mit id='content' UND class='myClass'"?

drücken

Oder haben Sie einfach eine oder andere Weise als in

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

oder 

<div id="content-sectionA">
    Lorem Ipsum...
</div>
War es hilfreich?

Lösung

In Ihrem Stylesheet: 

div#content.myClass

Edit: Diese könnten helfen, auch: 

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

und pro Ihr Beispiel: 

div#content.sectionA

Bearbeiten, 4 Jahre später: Da diese Super alt ist und die Leute halten es zu finden: nicht verwenden, um den Tag-Namen in Ihren Wählern. #content.myClass ist schneller als div#content.myClass weil die tagName einen Schritt Filterung ergänzt, die Sie nicht brauchen. Verwenden Tagnamen in Selektoren nur dort, wo Sie müssen!

Andere Tipps

Es gibt Unterschiede zwischen #header .callout und #header.callout in css.

Hier ist die "plain English" von #header .callout:
Wählen Sie alle Elemente mit dem Klassennamen callout, die Nachkommen des Elements mit der ID header.

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

Sie können mehr hier lesen CSS Tricks

Nun allgemein sollten Sie nicht ein Element von ID angegeben müssen klassifizieren, weil id immer eindeutig ist, aber wenn Sie wirklich brauchen, sollten folgende Arbeiten: 

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

Es ist nichts falsch mit einer ID und einer Klasse auf ein Element kombiniert, aber man sollte es nicht durch beide für eine Regel identifizieren müssen. Wenn Sie wirklich wollen, können Sie dies tun: 

#content.sectionA{some rules}

Sie brauchen nicht die div vor der ID wie andere vorgeschlagen haben.

Im allgemeinen CSS-Regeln speziell für dieses Element sollten mit der ID eingestellt werden, und diejenigen, werden ein größeres Gewicht als die von nur die Klasse tragen. Regeln durch die Klasse festgelegt würden Eigenschaften, die auf mehrere Elemente anwenden, die Sie nicht wollen, an mehreren Stellen zu jeder Zeit Sie einstellen müssen geändert werden.

Das läuft darauf hinaus, dieses: 

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

Sinn?

Sie können ID und Klasse in CSS kombinieren, aber IDs sollen einzigartig sein, so eine Klasse zu einem CSS-Selektor hinzugefügt würde es über qualifizieren.

Verwendung:. tag.id ; tag#classin die Tag-Variablen in Ihrem CSS

Ids sollen breit einzigartiges Dokument sein, so sollten Sie auf beide nicht wählen müssen basiert. Sie können ein Element mehrere Klassen obwohl mit class="class1 class2" zuweisen

Ich glaube, Sie alle falsch sind. IDs im Vergleich zu Klasse ist nicht eine Frage der Spezifität; sie haben ganz andere logische Anwendungen.

IDs sollten verwendet werden, um bestimmte Teile einer Seite zu identifizieren. Header, die Navigationsleiste, die wichtigsten Artikel, Autor Zuschreibung, Footer

Klassen sollten Arten verwendet werden, um die Seite zu übernehmen. Angenommen, Sie haben eine allgemeine Magazin Website. Jede Seite auf der Website wird die gleichen Elemente haben - Header, nav, Hauptartikel, Sidebar, Footer. Aber Ihr Magazin hat verschiedene Abschnitte - Wirtschaft, Sport, Unterhaltung. Sie möchten die drei Abschnitte verschiedene Blicke haben -. Wirtschaft konservativ und quadratisch, Sport-Action-y, Unterhaltung hell und jung

Sie verwenden Klassen dafür. Sie wollen nicht zu haben, um mehrere IDs zu machen - # Ökonomie-Artikel und # Sport-Artikel und # Entertainment-Artikel. Das macht keinen Sinn. Vielmehr würden Sie drei Klassen definieren, .economics, Sport und .entertainment, dann definieren die #nav, #article und #footer ids für jeden. 

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

Wird nicht funktionieren, wenn der Doctype HTML 4.01 obwohl ...

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top