Wie identifiziere ich die übergeordnete CSS-Regel in Chrome DevTools?

Identifizieren der überschreibenden CSS-Regel mit Chrome DevTools

Wenn Sie die Entwicklertools von Chrome verwenden, um den CSS-Stil zu untersuchen, kann es vorkommen, dass ein Stil als überschrieben markiert wird. Um die spezifische Regel zu bestimmen, die sie außer Kraft setzt, führen Sie die folgenden Schritte aus:

1. Öffnen Sie den Elementinspektor: Wählen Sie das Element aus, dessen Stil Sie überprüfen möchten. Klicken Sie mit der rechten Maustaste und wählen Sie „Element prüfen“ oder verwenden Sie die Tastenkombination „Strg-Umschalt-C“.
2. Suchen Sie das Bedienfeld „Berechneter Stil“: Klicken Sie im rechten Bedienfeld des Inspektors auf die Registerkarte „Berechnet“.
3. Erweitern Sie die Eigenschaft: Identifizieren Sie die CSS-Eigenschaft, die überschrieben wird. Klicken Sie auf den Pfeil neben dem Eigenschaftsnamen, um ihn zu erweitern.
4. Überprüfen Sie die geltenden Regeln: Die erweiterte Eigenschaft zeigt eine Liste aller CSS-Regeln an, die für das Element gelten, einschließlich der überschriebenen Regel.
5. Identifizieren Sie die Gewinnerregel: Die Regel, die derzeit die größte Spezifität aufweist (basierend auf der CSS-Kaskade), wird hervorgehoben und als „gewinnende“ Regel markiert.

Beispiel:

Wenn eine CSS-Eigenschaft „Farbe“ überschrieben wird, sehen Sie eine Liste aller Regeln, die die Eigenschaft „Farbe“ für das Element definieren. Die „gewinnende“ Regel mit der höchsten Spezifität wird mit einer größeren Schriftstärke und einem dunkelgrünen Häkchen gekennzeichnet.

Das obige ist der detaillierte Inhalt vonWie identifiziere ich die übergeordnete CSS-Regel in Chrome DevTools?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!