CSS は if/else ステートメントなしで条件付きロジックを実装できますか?

CSS は条件付きロジックを組み込むことができますか?

CSS の領域、つまりカスケード スタイル シートは、ご覧のような if/else 条件をネイティブにサポートしていません。従来のプログラミング言語で。ただし、この制限はさまざまな方法で回避できます。

1. CSS クラス:

HTML クラスを利用すると、さまざまなシナリオに応じてさまざまなスタイル ルールを作成できます。たとえば、次のコードはクラスに基づいて個別の背景位置を割り当てます:

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

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

2。 CSS プリプロセッサ (例: Sass):

Sass のような CSS プリプロセッサは、より複雑な条件を可能にする条件ステートメントを提供します:

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

3. CSS カスタム プロパティ (変数):

CSS のカスタム プロパティは変数と同様に動作し、実行時に評価されます:

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

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

.two {
  background-color: black;
}

4.サーバー側の前処理:

PHP などのサーバー側言語を使用すると、動的な値に基づいて CSS ファイルを前処理できます:

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

5. UI ロジックの CSS テクニック:

Ahmad Shadeed は、if/else を使用せずに一般的な UI ベースの条件付きロジックを解決する新しい CSS テクニックを記事で紹介しています:
[CSS If/Else](https: //www.sitepoint.com/css-ifelse/)

以上がCSS は if/else ステートメントなしで条件付きロジックを実装できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。