Pouvez-vous utiliser la logique conditionnelle en CSS ?
Les conditions If-else ne sont pas prises en charge nativement en CSS. Cependant, il existe plusieurs méthodes pour obtenir des fonctionnalités similaires.
Classes CSS :
Si vous contrôlez le HTML, vous pouvez utiliser des classes CSS pour appliquer différents styles en fonction sur une variable. Par exemple :
<p class="normal">Text</p> <p class="active">Text</p>
p.normal { background-position: 150px 8px; } p.active { background-position: 4px 8px; }
Préprocesseurs CSS (par exemple, Sass) :
Les préprocesseurs CSS permettent l'utilisation de structures de contrôle, y compris les conditions. Par exemple, dans Sass :
$type: monster; p { @if $type == "ocean" { color: blue; } @else if $type == "matador" { color: red; } @else if $type == "monster" { color: green; } @else { color: black; } }
Propriétés personnalisées CSS :
Les propriétés personnalisées peuvent être évaluées au moment de l'exécution dans les navigateurs pris en charge. Vous pouvez les utiliser pour définir des styles en fonction de conditions :
:root { --main-bg-color: brown; } .one { background-color: var(--main-bg-color); } .two { background-color: black; }
Prétraitement côté serveur :
Vous pouvez également prétraiter votre feuille de style avec un langage côté serveur. Par exemple, en PHP :
p { background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px; }
Autres techniques :
Pour des scénarios plus complexes, vous pouvez explorer les astuces et techniques CSS mentionnées dans des articles tels que "Si/ Sinon en CSS" par Ahmad Shadeed.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!