Bagaimana Anda Boleh Mensimulasikan Logik Bersyarat dalam CSS Anda?

Bolehkah Anda Menggunakan Logik Bersyarat dalam CSS?

Sekiranya syarat lain tidak disokong secara asli dalam CSS. Walau bagaimanapun, terdapat beberapa kaedah untuk mencapai kefungsian yang serupa.

Kelas CSS:

Jika anda mempunyai kawalan ke atas HTML, anda boleh menggunakan kelas CSS untuk menggunakan gaya yang berbeza berdasarkan pada pembolehubah. Contohnya:

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

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

Prapemproses CSS (cth., Sass):

Prapemproses CSS membenarkan penggunaan struktur kawalan, termasuk bersyarat. Contohnya, dalam Sass:

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

Sifat Tersuai CSS:

Sifat tersuai boleh dinilai pada masa jalan dalam penyemak imbas yang disokong. Anda boleh menggunakannya untuk menetapkan gaya berdasarkan syarat:

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

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

.two {
  background-color: black;
}

Prapemprosesan Bahagian Pelayan:

Anda juga boleh praproses helaian gaya anda dengan bahasa sebelah pelayan. Contohnya, dalam PHP:

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

Teknik Lain:

Untuk senario yang lebih kompleks, anda boleh meneroka helah dan teknik CSS yang disebut dalam artikel seperti "Jika/ Lain dalam CSS" oleh Ahmad Shadeed.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Mensimulasikan Logik Bersyarat dalam CSS Anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!