Pengertian ID dan Class pada layout halaman web CSS

Pengertian dan penerapan ID dan class pada layout halaman web XHTML CSS:

Andai saja XHTML dan CSS bisa berorientasi objek. . Matahari seharusnya terbit di utara. Namun, semuanya harus dilihat dengan mentalitas OO, dan kita hampir tidak bisa menghitungnya. Faktanya, seseorang telah mengusulkan gaya OO sejak tahun 2000, tetapi gaya tersebut tidak dapat ditemukan lagi.

Jadi apa yang harus dilakukan? Sekarang semua orang tahu bahwa CSS bisa ditulis seperti ini:

Kita dapat menganggapnya sebagai prototipe, atau sebuah kelas, -__-b tampaknya merupakan sebuah kelas pada awalnya, dan kemudian "membuat instance" sebuah objek dalam HTML, misalnya:

Elemen ini akan menggunakan definisi CSS yang sesuai, tetapi kelas yang sesuai saja tidak cukup, karena halaman kita mungkin menerapkan kelas ini di banyak tempat Untuk menangani hubungan "pribadi", ubah kode tadi menjadi:

Dalam hal ini, elemen dengan ID aaoao akan menerapkan definisi kelas .G_G, dan Anda bisa menggunakan pemilih seperti #aoao{} untuk memasukkan definisi efek privat, yang tidak akan memengaruhi kelas .G_G publik. , pada saat yang sama, prioritas yang ditentukan oleh #aoao akan lebih tinggi daripada .G_G, yang sejalan dengan akal sehat bahwa definisi pribadi memiliki prioritas lebih tinggi daripada definisi publik^^.

Karena saya menggunakan sesuatu yang unik seperti ID, menggunakan kembali hal-hal yang ditentukan secara pribadi menjadi masalah (ID hanya dapat muncul sekali di halaman, saya tidak tahu siapa yang mengatakan itu, tapi itulah kenyataannya). Bagaimana jika kita ingin mencapai privatisasi pada banyak hal yang sama? Maka kita harus menerapkan "polimorfisme". Gali haha. Ubah kodenya lagi:

Salah satunya adalah "G_G" dan yang lainnya adalah "o_O", tetapi jika kita menggunakan .o_O{}, kita juga bisa mendefinisikan elemen tersebut jika CSSnya seperti ini:

Semua elemen akan ditentukan, dan karena definisi tidak bertumpuk, semuanya akan diterapkan. Kalau kodenya seperti ini, saya tidak tahu apakah akan lebih mudah dipahami.

Selanjutnya, kita perlu menerapkan "enkapsulasi". Anda harus sering menggunakan pemilih anak.

Meskipun .bendan{} dan .G_G .bendan{} bisa didefinisikan, yang terakhir hanya bisa diterapkan pada elemen dengan kelas "G_G". Kita cukup memahami .bendan{} sebagai definisi global dan .G_G .bendan{ } dipahami sebagai definisi parsial, yang bermanfaat untuk modularisasi XHTML dan CSS kami. ^^ "Enkapsulasi" yang legendaris muncul, dan kemudian berlanjut.

Kode tersebut dapat menghasilkan perubahan yang tak terhitung jumlahnya, dan jika Anda tidak memahaminya, Anda harus memulai dari awal. ^^

Pahami secara mendalam penerapan ID dan kelas dalam tata letak halaman web XHTML CSS!