Kombinieren eines Klassenselektors mit einer ID

Question

Ich verwende das folgende Css:

/* style.css */
#someId {
   background-color: red;
}
#someId.medium {
   width: 300px;
}
#someId.large {
   width: 500px;
}

mit der html:

<!-- medium.html -->
<div id="someId" class="medium">hello, world</div>

et

<!-- large.html -->
<div id="someId" class="large">hello, world</div>

Ich weiß, dass das obige unter FireFox und Opera gut funktioniert, und es funktioniert no auf IE6 funktionieren (Überraschung, Überraschung).

Meine Fragen sind:

  Ist das obige CSS gemäß den CSS-Spezifikationen korrekt (und wo kann ich dieses spezifische Problem finden)?

  Welche Browser (auf welcher Plattform) unterstützen dies und welche nicht?

Aktualisierung:
Die IDs sind pro Seite eindeutig. Ich habe versucht, dies zu kommunizieren, indem ich medium.html y large.html aber offensichtlich war das nicht offensichtlich genug.

Update 2:
Das obige Codebeispiel wurde nur geschrieben, um meine Frage zu veranschaulichen. Es ist nicht Teil des Produktionscodes und erhebt keinen Anspruch auf Vollständigkeit. Kurz gesagt, es ist nur ein Beispiel, um ein Problem mit einer sehr spezifischen Lösung zu demonstrieren.

Answer 1

quirksmode haben eine Tabelle, die Selektor (u.a.) Browser unterstützt. leider gibt es keinen Test für die Kombination von Selektor. aber als ie6 scheitern mehrere Klassen ist das nicht so überraschend.

w3c css spezifikation erklärt, wie der css-Selektor funktionieren sollte, gibt es eine DIV.warning et E#myid die nicht genau wie Ihre sind, aber darauf hindeuten, dass es funktionieren sollte (vielleicht ist es auf der Seite erklärt, ich habe nicht alles gelesen ;) )

Answer 2

Wenn Sie "#someId" nicht als id brauchen, können Sie es zu einer Klasse ".someId" machen und dann die anderen beiden Klassen verwenden, um sie bei Bedarf zu erweitern... wie diese class="someId medium" ect. Probieren Sie dies aus und sehen Sie, ob es funktioniert. Außerdem ist es sowieso die bessere Lösung, weil man nicht zwei gleichnamige Ids auf einer Seite haben kann.

.someId {
   background-color: red;
}
.medium {
   width: 300px;
}
.large {
   width: 500px;
}

und dann

<div class="someId medium">hello, world</div>

oder

<div class="someId large">hello, world</div>

Answer 3

Das sollte funktionieren! Das ist seltsam. Versuchen Sie, sie umzudrehen, wie in .large#someId .

Answer 4

Donnerwetter. Das ist mir noch nie untergekommen, aber Sie haben völlig recht. Dein Code sollte so funktionieren, wie du es erwartest.

Ich bin mir ziemlich sicher, dass nur der IE 6 ein Problem damit haben wird.

Answer 5

Sie könnten versuchen, ausführlicher zu sein, als Ihnen lieb ist. A

<div id="someId" class="someId-medium">hello, world</div>

oder

<div id="someId" class="someId-large">hello, world</div>

und ändern Sie dann Ihr CSS wie folgt:

#someId {
    background-color: red;
}
.someId-medium {
    width: 300px;
}
.someId-large {
    width: 500px;
}