Petua didedahkan: Cara menggunakan adalah dan tempat pemilih untuk mencapai reka letak CSS yang lebih fleksibel

Petua didedahkan: Cara menggunakan dan tempat pemilih untuk mencapai reka letak CSS yang lebih fleksibel

Dalam reka letak CSS, pemilih adalah bahagian yang sangat penting. Mereka membenarkan kami memilih dan menggayakan elemen berdasarkan kriteria tertentu. Dalam spesifikasi CSS terkini, pemilih adalah dan tempat telah menjadi alat untuk kami susun atur halaman web dengan lebih fleksibel. Artikel ini akan mendedahkan cara menggunakan kedua-dua pemilih ini untuk mencapai reka letak CSS yang lebih fleksibel.

Pertama, mari perkenalkan pemilih adalah. Pemilih is dipanggil pemilih logik, yang boleh memilih berbilang elemen sekaligus. Sebagai contoh, kami ingin memilih semua elemen div dan p dan menetapkan warna latar belakangnya kepada merah. Pendekatan tradisional ialah menggunakan berbilang pemilih yang dipisahkan dengan koma:

div, p {
  background-color: red;
}

Dan menggunakan pemilih is, kita boleh memudahkan kod di atas kepada:

:is(div, p) {
  background-color: red;
}

Dengan cara ini, kita boleh memilih berbilang elemen sekaligus, menjadikan kod CSS Lebih ringkas .

Seterusnya, mari perkenalkan pemilih tempat. Pemilih tempat dipanggil pemilih bersyarat, yang memilih elemen berdasarkan syarat tertentu. Sebagai contoh, kami ingin memilih semua elemen dengan kelas "bekas" dan elemen induknya ialah div, dan menetapkan warna fonnya kepada biru. Pendekatan tradisional ialah menggunakan sub-pemilih dan pemilih kelas:

div .container {
  color: blue;
}

Menggunakan pemilih tempat, kita boleh memudahkan kod di atas kepada:

.container:where(div) {
  color: blue;
}

Dengan cara ini, kita boleh memilih elemen berdasarkan syarat tertentu, menjadikan kod CSS Lebih fleksibel.

Selain pemilih is dan where, kami juga boleh menggunakannya dalam kombinasi untuk mencapai kesan susun atur yang lebih kompleks. Sebagai contoh, kami ingin memilih semua elemen yang unsur anak langsungnya ialah p dan kelasnya ialah "serlahkan", dan tetapkan saiz fonnya kepada 20px. Pendekatan tradisional ialah menggunakan sub-pemilih dan pemilih kelas:

p > .highlight {
  font-size: 20px;
}

Menggunakan adalah dan di mana pemilih, kita boleh memudahkan kod di atas kepada:

p:where(:is(> .highlight)) {
  font-size: 20px;
}

Dengan cara ini, kita boleh memilih elemen berdasarkan keadaan yang lebih kompleks, Mencapai lebih fleksibel susun atur CSS.

Ringkasnya, adalah dan tempat pemilih memberikan kami kaedah reka letak CSS yang lebih fleksibel. Melalui pemilih is, kita boleh memilih berbilang elemen sekaligus, menjadikan kod CSS lebih ringkas melalui pemilih tempat, kita boleh memilih elemen berdasarkan syarat tertentu, menjadikan kod CSS lebih fleksibel. Sudah tentu, kedua-dua pemilih ini juga boleh digunakan dalam kombinasi untuk mencapai kesan susun atur yang lebih kompleks. Saya harap artikel ini boleh membantu anda, dan saya harap anda boleh menggunakan pemilih is dan where dengan mudah dalam reka letak CSS untuk mencapai reka letak halaman web yang lebih fleksibel.

Atas ialah kandungan terperinci Petua didedahkan: Cara menggunakan adalah dan tempat pemilih untuk mencapai reka letak CSS yang lebih fleksibel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!