Bolehkah CSS Melaksanakan Logik Bersyarat Tanpa Pernyataan if/else?

Bolehkah CSS Menjelmakan Logik Bersyarat?

Alam CSS, atau Helaian Gaya Cascading, tidak menyokong secara asalnya keadaan jika/lain seperti yang dilihat dalam bahasa pengaturcaraan tradisional. Walau bagaimanapun, had ini boleh dielakkan melalui pelbagai pendekatan:

1. Kelas CSS:

Dengan memanfaatkan kelas HTML, anda boleh mencipta peraturan gaya yang berbeza untuk senario yang berbeza. Sebagai contoh, kod berikut memberikan kedudukan latar belakang yang berbeza berdasarkan kelas:

<p class="normal">Text</p>
<p class="active">Text</p>

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

2. Prapemproses CSS (cth., Sass):

prapemproses CSS seperti Sass menyediakan pernyataan bersyarat yang membenarkan keadaan yang lebih kompleks:

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

3. Sifat Tersuai CSS (Pembolehubah):

Sifat tersuai dalam CSS berkelakuan serupa dengan pembolehubah dan dinilai pada masa jalan:

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

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

.two {
  background-color: black;
}

4. Prapemprosesan Sebelah Pelayan:

Menggunakan bahasa sebelah pelayan seperti PHP, anda boleh pramemproses fail CSS berdasarkan nilai dinamik:

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

5. Teknik CSS untuk Logik UI:

Ahmad Shadeed mempamerkan teknik CSS novel untuk menyelesaikan logik bersyarat berasaskan UI biasa tanpa menggunakan if/else dalam artikelnya:
[CSS If/Else](https: //www.sitepoint.com/css-ifelse/)

Atas ialah kandungan terperinci Bolehkah CSS Melaksanakan Logik Bersyarat Tanpa Pernyataan if/else?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!