Wie kann ich bedingtes Styling in CSS implementieren, ohne if/else-Anweisungen zu verwenden?

<p>

<p>Bedingtes Styling in CSS: Jenseits von if/else

<p>In CSS können traditionelle if/else-Anweisungen für bedingtes Styling verlockend erscheinen. Dies wird jedoch nicht nativ unterstützt. Ziehen Sie stattdessen alternative Ansätze in Betracht:

<p>Klassenbasiertes Styling:

<p>Weisen Sie HTML-Elementen Klassen zu und definieren Sie entsprechende Stilregeln. Zum Beispiel:

<p>

<p>In Ihrem CSS:

p.normal { background-position: 150px 8px; }
p.active { background-position: 4px 8px; }

<p>CSS-Präprozessoren:

<p>Verwenden Sie Präprozessoren wie Sass, um bedingte Anweisungen einzuführen:

$type: monster;
p {
  @if $type == ocean { color: blue; }
  @else if $type == matador { color: red; }
  @else if $type == monster { color: green; }
  @else { color: black; }
}

<p>Beachten Sie, dass Präprozessoren eine Vorverarbeitung erfordern und Bedingungen beim Kompilieren ausgewertet werden Zeit.

<p>Benutzerdefinierte Eigenschaften:

<p>Nutzung benutzerdefinierter CSS-Eigenschaften (CSS-Variablen) für die Laufzeitauswertung:

:root { --main-bg-color: brown; }
.one { background-color: var(--main-bg-color); }
.two { background-color: black; }

<p>Server -Side Vorverarbeitung:

<p>Verarbeiten Sie Ihr Stylesheet mit einer serverseitigen Sprache wie PHP:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

<p>Andere Techniken:

<p>Weitere Informationen zu fortgeschrittenen CSS-Techniken zur bedingten Gestaltung ohne if/else finden Sie im Artikel von Ahmad Shadeed.

Das obige ist der detaillierte Inhalt vonWie kann ich bedingtes Styling in CSS implementieren, ohne if/else-Anweisungen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!