CSS で条件付きロジックをシミュレートするにはどうすればよいですか?

Linda Hamilton
リリース: 2024-11-10 01:42:02
オリジナル
896 人が閲覧しました

How Can You Simulate Conditional Logic in Your CSS?

CSS で条件付きロジックを使用できますか?

If-else 条件は CSS ではネイティブにサポートされていません。ただし、同様の機能を実現する方法がいくつかあります。

CSS クラス:

HTML を制御できる場合は、CSS クラスを使用して、ベースのさまざまなスタイルを適用できます。変数上で。例:

<p class="normal">Text</p>
<p class="active">Text</p>
ログイン後にコピー
p.normal {
  background-position: 150px 8px;
}
p.active {
  background-position: 4px 8px;
}
ログイン後にコピー

CSS プリプロセッサ (Sass など):

CSS プリプロセッサでは、条件文を含む制御構造の使用が可能です。たとえば、Sass の場合:

$type: monster;
p {
  @if $type == "ocean" {
    color: blue;
  } @else if $type == "matador" {
    color: red;
  } @else if $type == "monster" {
    color: green;
  } @else {
    color: black;
  }
}
ログイン後にコピー

CSS カスタム プロパティ:

カスタム プロパティは、サポートされているブラウザーで実行時に評価できます。これらを使用して、条件に基づいてスタイルを設定できます:

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

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

.two {
  background-color: black;
}
ログイン後にコピー

サーバー側前処理:

サーバー側言語でスタイルシートを前処理することもできます。たとえば、PHP の場合:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}
ログイン後にコピー

その他のテクニック:

より複雑なシナリオについては、「If/ Else in CSS」 by Ahmad Shadeed。

以上がCSS で条件付きロジックをシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート