Bagaimanakah Saya Boleh Menggunakan Semula Gaya CSS Dengan Cekap Tanpa Rujukan Secara Terus Peraturan?

Merujuk Peraturan CSS Dalam Yang Lain: Panduan untuk Penggayaan Cekap

Dalam CSS, anda tidak boleh merujuk secara langsung satu set peraturan daripada yang lain. Walau bagaimanapun, terdapat dua pendekatan yang berdaya maju untuk mencapai kebolehgunaan semula kod dan penggayaan yang cekap.

Menggunakan Semula Pemilih

Anda boleh menggunakan semula pemilih merentas berbilang set peraturan dalam helaian gaya. Pertimbangkan kod berikut:

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}

Dalam contoh ini, set peraturan .opacity digunakan pada kedua-dua elemen yang sepadan dengan kelas .opacity dan kelas .someDiv.

Menggunakan Pelbagai Pemilih

Anda juga boleh menggunakan berbilang pemilih pada satu set peraturan. Ini dilakukan dengan mengasingkan pemilih dengan koma:

.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

Dengan pendekatan ini, set peraturan .radius digunakan pada kedua-dua elemen yang sepadan dengan kelas .radius dan kelas .someDiv.

Memohon Berbilang Kelas pada Elemen HTML

Akhir sekali, anda boleh menggunakan berbilang kelas pada satu elemen HTML menggunakan atribut kelas. Ini membolehkan anda menggunakan berbilang set peraturan pada elemen yang sama:

<div class="opacity radius"></div>

Kod ini menggunakan kedua-dua set peraturan .opacity dan .radius pada

elemen.

Amalan Terbaik

Apabila menamakan kelas CSS, adalah lebih baik untuk menerangkan sebab sesuatu elemen harus digayakan dan bukannya bagaimana. Contohnya, bukannya .opacity dan .radius, pertimbangkan untuk menggunakan .hidden dan .rounded. Ini memudahkan untuk memahami tujuan setiap kelas dan menggalakkan kejelasan kod.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Semula Gaya CSS Dengan Cekap Tanpa Rujukan Secara Terus Peraturan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html for using class Attribute this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn