2 Stimmen

Kombinieren eines Klassenselektors mit einer ID

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.

1voto

Karinne Punkte 249

Wie bereits erwähnt, ist ID ein eindeutiger Bezeichner und sollte daher nur einmal auf einer Seite verwendet werden. Normalerweise würden ID's für die wichtigsten Abschnitte in Ihrem Mark-up wie #header, #content #footer, etc... für den Rest, verwenden Sie einfach Klassen verwendet werden.

Für Ihren Text ändern Sie #someId in .someId und können dann .large oder .medium verwenden, da Sie mehrere Klassen auf ein Element anwenden können.

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

Und Ihr CSS würde lauten

.someId { background-color: #ccc; }
.large { font-size: 50px; }
.medium { font-size: 25px; }

Außerdem... wenn der Text "Hello, World" ein Titel ist, empfehle ich Ihnen dringend, die richtigen Elemente (h1, h2, etc...) zu verwenden und ihre Stile zu optimieren, anstatt neue zu erstellen.

Ich hoffe, das hilft!

EDIT: Für den Kommentar unten, hier ist ein kleiner HTML-Code, den ich gerade im IE6 getestet habe und der funktioniert. Er funktioniert auch in FF und Opera, also gehe ich davon aus, dass er auch in Safari und Chrome funktioniert.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    .something { background-color: #ccc; }
    .else { color: #090; }
    </style>
</head>

<body>

    <div class="something">This is just something</div>
    <div class="else">This is just else</div>
    <div class="something else">This is something else</div>

</body>
</html>

0voto

Adrian Schmidt Punkte 1877

Ich bin mir nicht sicher, ob es in Ihrer Anwendung möglich ist, eine Javascript-Bibliothek in den Mix zu ziehen, aber eine Menge CSS, die nicht gut im IE6 funktioniert, ist möglich, wenn man jQuery verwendet.

Allerdings, wenn Sie keine andere Verwendung für eine 24kb jQuery-Bibliothek haben, scheint es eine heftige Zusatz für eine einzige CSS-Attribut. Vielleicht können Sie mit Graceful Degradation gehen?

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X