Bagaimanakah Saya Boleh Melaksanakan Penggayaan Bersyarat dalam CSS Tanpa Menggunakan Pernyataan if/else?

<p>

<p>Penggayaan Bersyarat dalam CSS: Beyond if/else

<p>Dalam CSS, pernyataan if/else tradisional mungkin kelihatan menarik untuk penggayaan bersyarat. Walau bagaimanapun, ini tidak disokong secara asli. Sebaliknya, pertimbangkan pendekatan alternatif:

<p>Penggayaan Berasaskan Kelas:

<p>Tugaskan kelas kepada elemen HTML dan tentukan peraturan gaya sewajarnya. Contohnya:

<p>

<p>Dalam CSS anda:

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

<p>Prapemproses CSS:

<p>Gunakan prapemproses seperti Sass untuk memperkenalkan pernyataan bersyarat:

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

<p>Perhatikan bahawa prapemproses memerlukan prapemprosesan dan syarat dinilai pada masa penyusunan.

<p>Sifat Tersuai:

<p>Memanfaatkan sifat CSS tersuai (pembolehubah CSS ) untuk penilaian masa jalan:

:root { --main-bg-color: brown; }
.one { background-color: var(--main-bg-color); }
.two { background-color: black; }

<p>Prapemprosesan Bahagian Pelayan:

<p>Praproses lembaran gaya anda menggunakan bahasa sebelah pelayan seperti PHP:

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

<p>Teknik Lain:

<p>Rujuk artikel Ahmad Shadeed untuk teknik CSS lanjutan untuk menangani penggayaan bersyarat tanpa if/else.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Penggayaan Bersyarat dalam CSS Tanpa Menggunakan Pernyataan if/else?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!