if/else ステートメントを使用せずに CSS で条件付きスタイルを実装するにはどうすればよいですか?

<p>

<p>CSS の条件付きスタイル: if/else を超えて

<p>CSS では、従来の if/else ステートメントが条件付きスタイルとして魅力的に見えるかもしれません。ただし、これはネイティブにはサポートされていません。代わりに、別のアプローチを検討してください:

<p>クラスベースのスタイリング:

<p>クラスを HTML 要素に割り当て、それに応じてスタイル ルールを定義します。例:

<p>

<p>CSS 内:

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

<p>CSS プリプロセッサ:

<p>Sass などのプリプロセッサを使用して条件文を導入します:

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

<p>プリプロセッサには前処理が必要であり、条件はコンパイル時に評価されることに注意してください。

<p>カスタム プロパティ:

<p>カスタム CSS プロパティ (CSS 変数を利用する) ) 実行時評価用:

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

<p>サーバー側前処理:

<p>PHP などのサーバー側言語を使用してスタイルシートを前処理:

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

<p>その他のテクニック:

<p>if/else を使用しない条件付きスタイルに対処するための高度な CSS テクニックについては、Ahmad Shadeed の記事を参照してください。

以上がif/else ステートメントを使用せずに CSS で条件付きスタイルを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。