Fahami prinsip carian dan pemadanan CSS untuk menjadikan CSS lebih ringkas dan cekap_Pertukaran pengalaman

WBOY
Lepaskan: 2016-05-16 12:04:08
asal
1102 orang telah melayarinya

Lihat CSS mudah:

DIV#divBox p span.red{color:red;}. Mengikut adat, pemahaman kami tentang CSS ini ialah penyemak imbas mula-mula mencari elemen DIV dengan id divBox . Apabila ditemui Kemudian, cari semua elemen p di bawahnya, dan kemudian cari semua elemen span Apabila didapati bahawa kelas span berwarna merah, gunakan gaya. Prinsip yang begitu mudah dan mudah difahami, tetapi pemahaman ini adalah bertentangan dan salah sama sekali.


Prinsip pemadanan:

Pemadanan CSS penyemak imbas tidak mencari dari kiri ke kanan, tetapi dari kanan ke kiri. Contohnya, DIV#divBox p span.red{color:red;} yang disebut sebelum ini, urutan carian penyemak imbas adalah seperti berikut:

Carian pertama untuk semua elemen span dengan class='red' dalam html, dan kemudian cari semula Periksa sama ada terdapat elemen p dalam elemen induknya, dan kemudian tentukan sama ada terdapat elemen div dengan id divBox dalam elemen induk p Jika kedua-duanya wujud, ia akan sepadan.

Kelebihan pelayar mencari dari kanan ke kiri adalah untuk menapis beberapa peraturan dan elemen gaya yang tidak berkaitan seawal mungkin. Contohnya, html dan css berikut:

Salin kod Kodnya adalah seperti berikut:

DIV#divBox p span.red{color:red;}