Kann CSS bedingte Logik ohne if/else-Anweisungen implementieren?

Kann CSS bedingte Logik verkörpern?

Der Bereich von CSS oder Cascading Style Sheets unterstützt keine nativen if/else-Bedingungen, wie gezeigt in traditionellen Programmiersprachen. Diese Einschränkung kann jedoch durch verschiedene Ansätze umgangen werden:

1. CSS-Klassen:

Durch die Nutzung von HTML-Klassen können Sie unterschiedliche Stilregeln für verschiedene Szenarien erstellen. Der folgende Code weist beispielsweise unterschiedliche Hintergrundpositionen basierend auf der Klasse zu:

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

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

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

CSS-Präprozessoren wie Sass stellen bedingte Anweisungen bereit, die komplexere Bedingungen ermöglichen:

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

3. Benutzerdefinierte CSS-Eigenschaften (Variablen):

Benutzerdefinierte Eigenschaften in CSS verhalten sich ähnlich wie Variablen und werden zur Laufzeit ausgewertet:

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

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

.two {
  background-color: black;
}

4. Serverseitige Vorverarbeitung:

Mit einer serverseitigen Sprache wie PHP können Sie CSS-Dateien basierend auf dynamischen Werten vorverarbeiten:

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

5. CSS-Techniken für UI-Logik:

Ahmad Shadeed stellt in seinem Artikel neuartige CSS-Techniken zum Auflösen gängiger UI-basierter bedingter Logik ohne Verwendung von if/else vor:
[CSS If/Else](https: //www.sitepoint.com/css-ifelse/)

Das obige ist der detaillierte Inhalt vonKann CSS bedingte Logik ohne if/else-Anweisungen implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!