Wie können Sie bedingte Logik in Ihrem CSS simulieren?

Können Sie bedingte Logik in CSS verwenden?

If-else-Bedingungen werden in CSS nicht nativ unterstützt. Es gibt jedoch mehrere Methoden, um eine ähnliche Funktionalität zu erreichen.

CSS-Klassen:

Wenn Sie die Kontrolle über den HTML-Code haben, können Sie CSS-Klassen verwenden, um verschiedene Stile basierend darauf anzuwenden auf einer Variablen. Zum Beispiel:

<p class="normal">Text</p>
<p class="active">Text</p>

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

CSS-Präprozessoren (z. B. Sass):

CSS-Präprozessoren ermöglichen die Verwendung von Kontrollstrukturen, einschließlich Bedingungen. Zum Beispiel in Sass:

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

Benutzerdefinierte CSS-Eigenschaften:

Benutzerdefinierte Eigenschaften können zur Laufzeit in unterstützten Browsern ausgewertet werden. Sie können sie verwenden, um Stile basierend auf Bedingungen festzulegen:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

Serverseitige Vorverarbeitung:

Sie können Ihr Stylesheet auch mit einer serverseitigen Sprache vorverarbeiten. Zum Beispiel in PHP:

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

Andere Techniken:

Für komplexere Szenarien können Sie CSS-Tricks und -Techniken erkunden, die in Artikeln wie „If/ Else in CSS“ von Ahmad Shadeed.

Das obige ist der detaillierte Inhalt vonWie können Sie bedingte Logik in Ihrem CSS simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!