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