können css bedingte logik verkörpern? Diese Einschränkung kann jedoch durch verschiedene Ansätze umgangen werden:

1. CSS -Klassen:

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

text

text

p.normal { Hintergrundposition: 150px 8px; } p.Active { Hintergrundposition: 4px 8px; }

Text
Text

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

css Precessoren wie Sass geben bedingte Aussagen an, die komplexere Bedingungen ermöglichen:

$ type: Monster; P { @if $ type == Ocean { Farbe: Blau; } @else wenn $ type == matador { Farbe: Rot; } @else wenn $ type == monster { Farbe: grün; } @anders { Farbe: Schwarz; } }

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

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

: root { --Main-BG-Color: Brown; } .eins { Hintergrundfarbe: var (-Main-BG-Color); } .zwei { Hintergrundfarbe: Schwarz; }

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

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

.two {
  background-color: black;
}

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

p { Hintergrundposition: php echo (@$ _ GET ['foo'] == 'bar')? "150": "4"; ?> PX 8px; }

p {
  background-position: px 8px;
}

ahmad schattierte Showcases Roman CSS-Techniken zur Behebung der konditionalen UI-basierten bedingten Logik, ohne in seinem Artikel zu verwenden: [CSS IF/Else] (https://wwwwwww.Sitepoint.com/css-