Peraturan CSS -Prioriti (berat)

Adakah anda tahu bahawa CSS menegaskan berat tertentu untuk setiap peraturan gaya? Ini adalah sangat aspek CSS kerana ia akan mengelakkan sebarang ketidaksesuaian antara apa yang anda mahu dapatkan dan apa yang anda dapat dalam realiti.

Satu contoh:

Cuba kod HTML berikut:

 div {background-color: blue;} 

Oleh itu, anda akan mendapat persegi biru 100X100 px.

Sekarang tambahkan kelas kepadanya:

 div {background-color: blue;}. MaDiv {background-color: red;} 

Alun-alun itu menjadi merah!

Sekarang gunakan ID:

 div {background-color: blue;} .maDiv {background-color: red;} #maDiv {background-color: yellow;} 

Alun-alun sekarang berwarna kuning kerana ID lebih kuat daripada kelas.

Gunakan seterusnya untuk menentukan gaya labelnya:

 div {background-color: blue;}. MaDiv {background-color: red;} # MaDiv {background-color: yellow;} 

Alun-alun itu bertukar hijau: sementara secara teori, empat warna yang berbeza telah diberikan kepadanya!

Berat

Keputusan ini adalah akibat daripada berat badan (juga dipanggil aturan keutamaan) CSS:

• Berat tag ialah 1
• Berat kelas ialah 10.
• Berat ID adalah 100.
• Berat gaya atribut adalah 1000.

Ini adalah berat asas, ada yang lain, sebagai contoh, kelas pseudo (: hover, : after, : focus ...). Contoh atribut CSS: hover hanya menambah sedikit berat ke elemen apabila kursor tetikus diluluskan.

Pengumpulan berat badan

Peraturan gaya kemudiannya mempunyai berat perantaraan. Sesungguhnya, timbunan berat.

Contoh:

 div {background-color: blue;} .maDiv {background-color: red;} .maDiv {background-color: yellow;} 

Seperti yang anda lihat, saya mempunyai elemen (berat 1) dan dua kelas yang sama (berat 10): unsur terakhir mengambil alih dan persegi kami berwarna kuning. Sekarang setelah menambah

 div {background-color: blue;} div.maDiv {background-color: red;} .maDiv {background-color: yellow;} 

Alun-alun itu menjadi merah. Mengapa?

• ".maDiv" - 10
• "div.maDiv" menggabungkan elemen dan kelas - 11!

Amaran: terkadang menambah kelas kepada peraturan tidak akan mencukupi untuk meningkatkan berat semua elemen yang terlibat.

Perhatikan bahawa

Bandingkan hasil kod ini:

 div {background-color: blue;} div # maDiv {background-color: red;} 

Dengan hasil ini:

 div {background-color: blue;} div #maDiv {background-color: red;} 

Dalam kes pertama div kami merah, dalam kes kedua ia biru!

"Tetapi kenapa, elemen + ID =, jadi mesti selalu merah!"

Perhatikan perbezaan halus:

• div # maDiv : terpakai untuk div dengan ID "maDiv".
• div #maDiv : Berlaku untuk semua elemen yang ID adalah "maDiv" yang terdapat dalam elemen induk yang disebut "div".

Dataran kami hanya berkenaan dengan peraturan pertama. Sebagai peraturan umum, sentiasa memberi perhatian kepada cara anda menulis peraturan anda, dengan betul menggunakan ruang, koma .. tetap

Contoh:

• p .myClass a {} : untuk semua pautan yang terkandung dalam mana-mana unsur yang kelasnya adalah "myClass", semuanya terkandung dalam mana-mana

  elemen. Berat: 12.

• p.myClass, a {} : untuk semua pautan dan semua

  yang kelasnya adalah "myClass". Berat: 11 atau 1

• p, .myClass, a {} : untuk semua pautan dan semua unsur yang kelasnya adalah "myClass" dan semua

  elemen. Berat: 1 hingga 10 atau 1