Ein Spezifitätskampf! (und andere Tricksereien)

Das Folgende ist ein Gastbeitrag von Francisco Dias von HubSpot. Ich habe Francisco und Cris Necochea diese kurze, unterhaltsame Präsentation auf dem Show & Tell auf der CSS Dev Conf dieses Jahr gesehen. Er stimmte freundlicherweise zu, sie für einen Blogbeitrag vorzubereiten!

19 Wege, eine Hintergrundfarbe zu überschreiben

Beginnend mit fast dem niedrigsten Spezifitätsselektor

div {
  background: black;
}

Es gibt eine ganze Reihe von Möglichkeiten, die bestehende Spezifität zu übertreffen, ohne den gleichen Trick zu wiederholen.

Klicken Sie sich durch jeden Schritt, um zu sehen, wie die Spione ihre Farbe (Schwarz oder Weiß) über die vorherige Farbe zwingen. Wenn das Übertrumpfen der Spezifität aufhört, haben sie immer noch mehr Tricks auf Lager!

(Die Spy-Form wird aus einem clip-path auf dem div in der Demo erstellt, um es unterhaltsamer und Spy-vs-Spy-ähnlicher zu gestalten. Wenn der Browser, den Sie gerade verwenden, clip-path nicht unterstützt, sehen Sie nur weiße oder schwarze Kästen.)

Siehe den Stift Spy Vs Spy von Francisco Dias (@FranDias) auf CodePen.

Was zum Teufel geht hier vor sich? Der Text in der Demo-Pen oben enthält weitere Informationen zu jedem Schritt, aber nur als schnelle Übersicht, hier sind die Phasen

Schritt 1: Elementselektor

0, 0, 0, 1

div {
  background: black;
}

Schritt 2: Zwei Elementselektoren

0, 0, 0, 2

body div {
  background: white;
}

Schritt 3: Drei Elementselektoren

0, 0, 0, 3

html body div {
  background: black;
}

Schritt 4: Klassen-Selektor

0, 0, 1, 0

.spy {
  background: white;
}

Schritt 5: Klasse + Element-Selektor

0, 0, 1, 1

div.spy {
  background: black;
}

Schritt 6: Element + Klasse + Pseudo-Klassen-Selektor

0, 0, 2, 1

div.spy:only-of-type {
  background: white;
}

Schritt 7: Gestapelte Klassen

0, 0, ∞, 0

.spy.spy.spy.spy.spy.spy.spy.spy.spy {
  background: black;
}

Schritt 8: ID-Selektor

0, 1, 0, 0

#spy {
  background: white;
}

Schritt 9: ID + Attribut-Selektor

0, 1, 1, 0

#spy[class^="s"] {
  background: black;
}

Schritt 10: Viele der oben genannten kombinieren…

0, 1, 3, 3

html body div#spy[class="spy"]:first-of-type.spy {
  background: white;
}

Schritt 11: Inline-Stil

1, 0, 0, 0

<div class="spy" id="spy" style="background: black;"></div>

Schritt 12: !important

So etwas wie [1, 0, 0, 0] pro Eigenschaft (kann einen Inline-Stil überschreiben).

div {
  background: white !important;
}

Schritt 13: !important auf Inline-Stil

So etwas wie [∞, 0, 0, 0] pro Eigenschaft, was kein CSS überschreiben kann.

<div class="spy" id="spy" style="background: black !important;"></div>

Schritt 14: box-shadow Trickery

Einige Eigenschaften malen über andere. box-shadow malt über den Hintergrund.

div {
  box-shadow: inset 0 9001rem 0 white;
}

Schritt 15: Invert-Filter

div {
  -webkit-filter: invert(1);
          filter: invert(1);
}

Schritt 16: Pseudo-Element-Überlagerung

div::after {
  content: "";
  height: 9001px;
  width: 9001px;
  background: black;
  top: 0;
  left: 0;
  position: absolute;
}

Schritt 17: !important wieder

Alle Spezifitätskämpfe könnten wieder ausgetragen werden, einschließlich des kampf pro Eigenschaft mit !important;, also beenden wir das hier.

div:after {
  background: white !important;
}

Schritt 18: @keyframes Trickery

!important ist nicht animierbar, daher kann die Animation es überschreiben.

@keyframes white {
  to {
    background: black;
  }
}

div:after {
  animation: white 1s linear;
  animation-play-state: paused;
  animation-delay: -1s;
  animation-fill-mode: forwards;
}

Schritt 19: Färben des Inhalts

Ein riesiger Blockcharakter über allem färbt die Farbe wieder um!

div:after {
  content: "█";
  line-height: 0;
  color: white;
  font-size: 9001px;
}

---

Ein GIF der Demo in großem Bildschirm-Chrome