Überschreiben von Stilen ohne! Wichtig

Wie ist es möglich, zu überschreiben Stile angegeben, in einem anderen style-sheet?

Möchte ich nicht verwenden !wichtiger tag, Sie zu überschreiben. Ich würde viel lieber geben Sie eine neue Stilvorlage, legen Sie die Stile dort. Könnte dies erreicht werden durch ändern der load-Reihenfolge der Stylesheets?

Kommentar zu dem Problem - Öffnen
Warum wurde der twitter boostrap-tag entfernt? Ich sehe es als relevant für diese Frage. Kommentarautor: Andres Ilich
@AndresIlich, Die ein anderes Stylesheet nicht unbedingt twitter bootstrap. Kommentarautor: Starx
@Starx ich verstehen, aber in der ersten Frage genannten Rahmen, ist es nicht relevant, zu den Plakaten Fall? Kommentarautor: Andres Ilich
@AndresIlich, Lokalisierte version der Frage gelten nicht als Priorität, da SO konzentriert sich auf die Unterstützung der Gemeinde, statt einer einzigen Fragesteller. Kommentarautor: Starx
@Starx ich verstehen, aber es ist ein twitter bootstrap - tag für einen Grund, aber ich denke, mit diesem format die Frage liefert, die für eine Vielzahl von Fragen, nur nicht die, die relevant für die poster-Fall. Kommentarautor: Andres Ilich

InformationsquelleAutor der Frage Hendrik | 2012-03-31

  1. 62

    Kommt es an. CSS steht für Cascading Style Sheets, und es gibt eine bestimmte Reihenfolge, die Stile angewendet werden, überschreiben die vorherigen Stile. Ohne allzu sehr ins detail:

    • , Wenn Sie Ihre Regeln haben die gleiche Spezifität, laden Sie einfach Ihre stylesheet-zweite und alles funktioniert Prima.
    • , Wenn Sie Ihre Regeln haben eine höhere Spezifität, die Reihenfolge spielt keine Rolle.
    • , Wenn Sie Ihre Regeln haben eine niedrigere Spezifität haben, müssen Sie passen Sie an.

    Also, was ist die Besonderheit? Im Grunde ist es die Summe von jeder Selektor in der Regel. Also diese:

    a {
    background-color: black;
    color: white;
}

    Weniger Spezifität als das:

    body a {
    color: orange;
}

    . ID-Selektoren haben eine höhere Spezifität als Klassen-Selektoren, die die gleiche Spezifität wie pseudo-class-Selektoren, die eine höhere Genauigkeit haben als tag-Selektoren. Also, wenn Sie alle Ihre Inhalte sind in einer <div> mit einem id von content, Sie wäre in der Lage zu überschreiben, ein Stil, der wie folgt aussieht:

    body a {
    border: 0;
}

    Mit:

    #content a {
    border: 1px solid black;
}

    InformationsquelleAutor der Antwort Ry-

  2. 2

    Den boostrap-stylesheet geladen werden soll, zuerst, Ihre stylesheet zweiten, auf diese Weise Ihre überschreibt abgeholt werden.

    Dies wird als "cascading", aus der Dokumentation:

    Cascading

    Dies ist die Möglichkeit gegeben, durch einige Stylesheet-Sprachen wie CSS zu ermöglichen Stil von Informationen aus verschiedenen Quellen gemischt werden
    zusammen. Diese könnten zum Beispiel corporate Design-Richtlinien
    Stile üblich, um eine Gruppe von Dokumenten, und Stile, die spezifisch für eine einzelne
    Dokument. Durch das speichern diese separat, können Stylesheets wiederverwendet werden,
    Vereinfachung authoring und zur effizienteren Nutzung von Netzwerk
    - caching. Die Kaskade definiert eine geordnete Folge von Stylesheets, wo
    Regeln in späteren Blätter haben größere Priorität als die früheren.     Nicht
    alle Stylesheet-Sprachen unterstützen cascading.

    InformationsquelleAutor der Antwort Andres Ilich

  3. 1

    Wenn Sie erhöhen können, die Spezifität von Stilen, können Sie dies tun, ohne die !important.

    Beispiel:

    HTML

    <div id="selector">
  <a>Hello</a>
  <a class="specific">Hi</a>
</div>

    CSS

    div a {}

    Werden ignoriert, wenn Sie einer bestimmten Klasse innerhalb #selector

    .specific { }

    Hier ist ein demo erklären, was ich meine. Grundsätzlich, die Idee ist, definieren Sie den Stil so eng wie möglich.

    InformationsquelleAutor der Antwort Starx

  4. 0

    Blick auf http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html.

    <p class="example">
    This is a <strong>test</strong>.
</p>

strong { color: red; }
p strong { color: green; }
p.example strong { color: blue; }

    Wird der text blau. Die Reihenfolge der Regeln spielt keine Rolle.

    InformationsquelleAutor der Antwort roger

Schreibe einen Kommentar