Wie außer Kraft setzen CSS3 Styles

Mit geerbt CSS3 Stile kommt die Möglichkeit, eine erbliche Stilregel außer Kraft zu setzen. Nehmen wir zum Beispiel einen Blick auf den folgenden Code, um eine Vorstellung davon zu bekommen, was das bedeuten könnte:

overRide.html
Dieses div hat nur den Stil aus dem Körper.
Dies ist eine regelmäßige Absatz mit Absatz Styling
Dieser Absatz ist ein Mitglied einer Klasse
Dieser Absatz ist ein Mitglied einer Klasse und hat eine ID, die beide mit Stilregeln.

Die Frage ist: Welche Farbe wird die welche Farbe Element Anzeige? Es ist ein Mitglied des Körpers, so sollte es rot. Es ist auch ein Absatz, und die Absätze sind grün. Es ist auch ein Mitglied der meine Klasse Klasse, so sollte es blau sein. Schließlich ist es benannt whatColor, und Elemente mit dieser ID sollte lila sein.

Vier scheinbar widersprüchliche Farbregeln sind alle auf diesem armen Element fallen gelassen. Welche Farbe wird es sein?

CSS hat ein klares Ranking-System für diese Art von Situation Handhabung. In der Regel präziser Regeln Trumpf allgemeinere Regeln. Hier ist der Vorrang (vom höchsten zum niedrigsten Vorrang):

  1. Benutzereinstellungen

    Der Benutzer hat immer die endgültige Entscheidung darüber, welche Arten verwendet werden. Die Benutzer werden nicht alle mögliche Arten überhaupt zu benutzen benötigt und kann immer das Stylesheet für ihre eigene lokale Kopie der Seite ändern. Wenn ein Benutzer einen besonderen Stil (zum Beispiel einen hohen Kontrast für Menschen mit Sehbehinderungen) anwenden muss, sollte er immer diese Option.

  2. Lokale Stil

    Ein lokaler Stil (mit Hilfe der Stil Attribut im HTML) hat die höchste Priorität der Entwickler definierten Stile. Es überschreibt alle anderen Arten.

  3. Ich würde

    Ein Stil an einem Element befestigt Ich würde hat viel Gewicht, weil es keine andere Stile definiert im Stylesheet außer Kraft setzt.

  4. Klasse

    Styles zu einer Klasse angebracht, um den Stil des Elements des Objekts außer Kraft setzen. Also, wenn Sie einen Absatz mit einer Farbe Grün haben, die zu einer Klasse gehört blau gefärbt, wird das Element blau sein, weil Klasse Arten von Elementstilen outrank.

  5. Element

    Das Element Stil hat Vorrang vor jeder seiner Container. Zum Beispiel ist, wenn ein Abschnitt innerhalb eines div, die Absatzstil hat das Potenzial, sowohl die außer Kraft setzen div und der Körper.

  6. Container-Element

    divs, Tabellen, Listen und andere Elemente verwendet als Behälter geben ihre Stile auf. Wenn ein Element innerhalb eines oder mehrerer dieser Behälter ist, kann es Stilattribute von ihnen erben.

  7. Körper

    Alles, was im Körper Stil definiert ist eine allgemeine Seite standardmäßig, aber es wird von allen möglichen anderen Arten außer Kraft gesetzt werden.

In dem overRide.html beispielsweise die Ich würde Regel hat Vorrang, so dass die Absatz-Displays in lila.

Ähnliche

Menü