CSS で条件付きロジックをシミュレートするにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-10 01:42:02

オリジナル

938 人が閲覧しました

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 サイトの他の関連記事を参照してください。