Petua pengoptimuman pengaturcaraan CSS3: Cara menggunakan dengan mahir adalah dan di mana pemilih

CSS ialah salah satu kemahiran penting untuk pembangun bahagian hadapan, dan CSS3 ialah versi lanjutan CSS, termasuk ciri dan fungsi yang lebih berkuasa. Dalam CSS3, pemilih ialah dan pemilih adalah dua teknik pengoptimuman pengaturcaraan yang sangat praktikal yang boleh membantu pembangun menulis kod gaya dengan lebih cekap.

1. Memperkenalkan pemilih ialah

Pemilih is ialah pemilih baharu dalam CSS3 Ia boleh memadankan berbilang pemilih pada masa yang sama dan hanya perlu menulis kod yang sama. Sebagai contoh, katakan kita mempunyai senarai dan perlu menggunakan gaya yang sama pada tag li di dalamnya. nth- child(1) {

...

}

li:nth-child(2) {

...

}

li:nth-child(3) {

...

}

Dengan pemilih is, kita boleh Kod gaya yang sama ditulis bersama untuk menjadikan kod lebih ringkas dan boleh dibaca:

:is(li:nth-child(1), li:nth-child(2), li:nth-child(3)) {

...

}

Dengan cara ini, kita bukan sahaja boleh meningkatkan kebolehselenggaraan kod gaya, tetapi juga mengurangkan jumlah kod dan meningkatkan kecekapan pembangunan.

2. Memperkenalkan pemilih tempat

Pemilih tempat juga merupakan pemilih baharu dalam CSS3. Ia mempunyai fungsi yang serupa dengan pemilih adalah, tetapi sintaksnya berbeza. Sintaks pemilih tempat adalah lebih fleksibel dan boleh memilih elemen berdasarkan keadaan yang berbeza. Sebagai contoh, kami ingin menggunakan gaya yang sama apabila memilih elemen dengan nama kelas tertentu atau apabila elemen semasa ialah elemen jenis tertentu Cara penulisan tradisional ialah menggunakan berbilang pemilih dan menetapkan gaya yang sama:

[. class*=" example”] {

...

}

[type="checkbox"] {

...

}

[type="radio"] {

...

}

Dan menggunakan pemilih tempat, kita boleh gunakan pemilih ini Gabung bersama untuk menjadikan kod lebih ringkas:

:where([class*="example"], [type="checkbox"], [type="radio"]) {

...

}

Kod seperti ini boleh Meningkatkan kebolehbacaan kod dan menjadikannya lebih mudah apabila anda perlu mengubah suai gaya.

3. Contoh penggunaan dengan mahir adalah dan di mana pemilih

Berikut adalah beberapa contoh untuk menunjukkan cara menggunakan dengan mahir dan di mana pemilih untuk mengoptimumkan pengaturcaraan CSS:

Butang Sudut Bulat

1. :is(.btn-primary , .btn-secondary) {

border-radius: 8px;

}

Kod ini memilih butang dengan nama kelas .btn-primary atau .btn-secondary dan menggunakan gaya sempadan bulat.

Corak zebra meja

2. tr:anak-anak(genap) {

background-color: #f2f2f2;

}

:is([type="checkbox"], [type="radio"]) tr:nth-child(even ) {

background-color: #ffffff;

}

Kod ini dapat memilih baris genap jadual dan menggunakan warna latar belakang yang berbeza pada baris yang mempunyai kotak pilihan atau kotak radio.

Gambar segi empat sama dan bulatan

3. :ialah(.persegi, .bulatan) {

width: 100px;
height: 100px;

}

.persegi {

border-radius: 0;

}

.kod ini boleh pilih {

dengan nama kelas .square atau .circle, dengan gaya sempadan berbeza digunakan berdasarkan nama kelas.

Melalui contoh ini, kita dapat melihat betapa bijaknya penggunaan pemilih dan di mana pemilih boleh meningkatkan kebolehbacaan dan kebolehselenggaraan kod, mengurangkan kod gaya berulang dan menjadikan kod lebih ringkas dan cekap.

Ringkasan:

adalah pemilih dan pemilih ialah dua teknik pengoptimuman pengaturcaraan berkuasa yang disediakan oleh CSS3, yang boleh membantu pembangun menulis kod gaya dengan lebih cekap. Penggunaan munasabah kedua-dua pemilih ini boleh meningkatkan kebolehbacaan dan kebolehselenggaraan kod, mengurangkan jumlah kod dan meningkatkan kecekapan pembangunan. Oleh itu, menguasai dan menggunakan pemilih adalah dan di mana pemilih adalah salah satu kemahiran penting untuk setiap pembangun bahagian hadapan.

Atas ialah kandungan terperinci Petua pengoptimuman pengaturcaraan CSS3: Cara menggunakan dengan mahir adalah dan di mana pemilih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!