Menurut pemahaman kita tentang prioritas CSS, gaya CSS yang terakhir ditentukan akan menggantikan semua gaya yang sudah ada atau yang bertentangan yang ditentukan sebelumnya, seperti contoh berikut:
| Berikut isi kutipannya: Contoh Kode Sumber: p { warna: merah; latar belakang: kuning } |
Paragraf di atas pada akhirnya akan muncul dalam font hijau dengan latar belakang kuning, karena warna yang terakhir ditentukan: hijau menimpa warna merah yang ditentukan sebelumnya definisi yang bertentangan dalam definisi tersebut, sehingga masih sah.
Mari kita lihat efek yang berjalan:
| Berikut isi kutipannya: Kode Sumber untuk Dijalankan: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>admin5</title>< style type="text/css">p { warna: merah; latar belakang: kuning }p { warna: hijau }</style></head><body><p>admin5</p></body></ html> <p class="merah hijau biru">www.admin5.com</p> <p class="hijau biru merah">admin5</p> <p class="biru merah hijau">www.admin5.com</p> |
Mungkin Anda berpikir Anda sudah mengerti. Apakah kamu benar-benar mengerti? Oke, mari kita lakukan tes kecil.
| Berikut isi kutipannya: Contoh Kode Sumber: .merah { warna: merah } .hijau { warna: hijau } .biru { warna: biru } ... <p class="merah hijau biru">admin5</p> <p class="green blue red">Surga pembelajaran Webmaster</p> <p class="biru merah hijau">www.admin5.com</p> |
Tolong beri tahu saya, warna apa yang akan muncul pada teks dalam tiga paragraf di atas ketika akhirnya ditampilkan?
Tolong jangan terburu-buru menjalankan kode berikut. Coba pikirkan, apa warnanya?
Oke, Anda sudah memikirkannya, mari kita lihat efek pengoperasiannya:
| Berikut isi kutipannya: Kode Sumber untuk Dijalankan: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.admin5.com< /title><style type="text/css">.red { warna: merah }.hijau { warna: hijau }.biru { warna: biru }</style></head><body><p class=" red green blue">admin5</p><p class="green blue red">Surga Pembelajaran Webmaster</p><p class="blue red green">www.admin5.com</p></body > </html> |
Jawabannya adalah semuanya ditampilkan dalam warna biru, yaitu biru. Meskipun setiap paragraf memiliki tiga gaya paragraf yang diterapkan dalam urutan berbeda, tampaknya warnanya harus ditentukan sesuai dengan urutan penerapan gaya tersebut , yang pertama ditampilkan dengan warna biru, dan yang pertama ditampilkan dengan warna biru, yang kedua ditampilkan dengan warna merah, dan yang ketiga ditampilkan dengan warna hijau di mana gaya diterapkan. Semuanya pada akhirnya mematuhi gaya yang terakhir ditentukan, dan warnanya biru! Jangan khawatir jika Anda menemui masalah serupa di kemudian hari, karena eksperimen di atas sudah memberikan jawabannya.